From 46f7ffb65a9d34cc0b7ce39ee8bec960e8235131 Mon Sep 17 00:00:00 2001
From: Lucas Bois <44686060+LucasBois1@users.noreply.github.com>
Date: Mon, 1 Apr 2024 07:23:44 -0300
Subject: [PATCH 01/10] chore: update Dashboard03.vue (#446)

Fix mismatch header lines in Block - Dashboard03 component.
---
 apps/www/src/lib/registry/default/block/Dashboard03.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/www/src/lib/registry/default/block/Dashboard03.vue b/apps/www/src/lib/registry/default/block/Dashboard03.vue
index bcbf1be2..3b60b282 100644
--- a/apps/www/src/lib/registry/default/block/Dashboard03.vue
+++ b/apps/www/src/lib/registry/default/block/Dashboard03.vue
@@ -136,7 +136,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '@/lib/registry/default/
       </nav>
     </aside>
     <div class="flex flex-col">
-      <header class="sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4">
+      <header class="sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-background px-4">
         <h1 class="text-xl font-semibold">
           Playground
         </h1>

From f55633ab8a7768cedd831d7c2694150c13df0375 Mon Sep 17 00:00:00 2001
From: Mike Ovyan <ovyan13@gmail.com>
Date: Mon, 1 Apr 2024 22:39:51 +0300
Subject: [PATCH 02/10] chore: fix wrong class at `Authentication03.vue` block
 example (#449)

used grid gap-2 instead of space-y-2
---
 apps/www/src/lib/registry/default/block/Authentication03.vue  | 2 +-
 apps/www/src/lib/registry/new-york/block/Authentication03.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/src/lib/registry/default/block/Authentication03.vue b/apps/www/src/lib/registry/default/block/Authentication03.vue
index a3d976ec..15dc0241 100644
--- a/apps/www/src/lib/registry/default/block/Authentication03.vue
+++ b/apps/www/src/lib/registry/default/block/Authentication03.vue
@@ -25,7 +25,7 @@ import { Label } from '@/lib/registry/default/ui/label'
     <CardContent>
       <div class="grid gap-4">
         <div class="grid grid-cols-2 gap-4">
-          <div class="space-y-2">
+          <div class="grid gap-2">
             <Label for="first-name">First name</Label>
             <Input id="first-name" placeholder="Max" required />
           </div>
diff --git a/apps/www/src/lib/registry/new-york/block/Authentication03.vue b/apps/www/src/lib/registry/new-york/block/Authentication03.vue
index 7f16bee2..e6e8d730 100644
--- a/apps/www/src/lib/registry/new-york/block/Authentication03.vue
+++ b/apps/www/src/lib/registry/new-york/block/Authentication03.vue
@@ -25,7 +25,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
     <CardContent>
       <div class="grid gap-4">
         <div class="grid grid-cols-2 gap-4">
-          <div class="space-y-2">
+          <div class="grid gap-2">
             <Label for="first-name">First name</Label>
             <Input id="first-name" placeholder="Max" required />
           </div>

From f91cfe9add70b9002cd0c13b87a6b53d51aeb8da Mon Sep 17 00:00:00 2001
From: Lucas Bois <44686060+LucasBois1@users.noreply.github.com>
Date: Mon, 1 Apr 2024 16:52:14 -0300
Subject: [PATCH 03/10] chore: add missing Separator import to
 `Announcement.vue` badge (#450)

---
 apps/www/.vitepress/theme/components/Announcement.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/www/.vitepress/theme/components/Announcement.vue b/apps/www/.vitepress/theme/components/Announcement.vue
index 83e1412e..bcf63a66 100644
--- a/apps/www/.vitepress/theme/components/Announcement.vue
+++ b/apps/www/.vitepress/theme/components/Announcement.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { announcementConfig } from '../config/site'
+import { Separator } from '@/lib/registry/default/ui/separator'
 import ArrowRightIcon from '~icons/radix-icons/arrow-right'
 </script>
 

From 81a75156170cb399e69c37a11553765ff4f46f02 Mon Sep 17 00:00:00 2001
From: Lucas Bois <44686060+LucasBois1@users.noreply.github.com>
Date: Wed, 3 Apr 2024 11:52:59 -0300
Subject: [PATCH 04/10] feat(Blocks): create Dashboards 05, 06 and 07 (#452)

* Create Dashboard05.vue

* chore: update index.ts

Add Dashboard05 to index.ts

* chore: create Dashboard05.vue new-york

Create Dashboard05 new-york version

* build: build registry

* chore: add Dashboard06 and Dashboard07

* fix: update `html-for` to `for`
---
 apps/www/__registry__/index.ts                |  42 +
 .../registry/default/block/Dashboard05.vue    | 706 ++++++++++++++++
 .../registry/default/block/Dashboard06.vue    | 627 ++++++++++++++
 .../registry/default/block/Dashboard07.vue    | 629 ++++++++++++++
 .../registry/new-york/block/Dashboard05.vue   | 772 ++++++++++++++++++
 .../registry/new-york/block/Dashboard06.vue   | 627 ++++++++++++++
 .../registry/new-york/block/Dashboard07.vue   | 629 ++++++++++++++
 7 files changed, 4032 insertions(+)
 create mode 100644 apps/www/src/lib/registry/default/block/Dashboard05.vue
 create mode 100644 apps/www/src/lib/registry/default/block/Dashboard06.vue
 create mode 100644 apps/www/src/lib/registry/default/block/Dashboard07.vue
 create mode 100644 apps/www/src/lib/registry/new-york/block/Dashboard05.vue
 create mode 100644 apps/www/src/lib/registry/new-york/block/Dashboard06.vue
 create mode 100644 apps/www/src/lib/registry/new-york/block/Dashboard07.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 09777068..265902db 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -1158,6 +1158,27 @@ export const Index = {
       component: () => import("../src/lib/registry/default/block/Dashboard04.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/block/Dashboard04.vue"],
     },
+    "Dashboard05": {
+      name: "Dashboard05",
+      type: "components:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","breadcrumb","sheet","pagination","progress","separator","table","tabs","tooltip","checkbox"],
+      component: () => import("../src/lib/registry/default/block/Dashboard05.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/block/Dashboard05.vue"],
+    },
+    "Dashboard06": {
+      name: "Dashboard06",
+      type: "components:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","breadcrumb","sheet","table","tabs","tooltip"],
+      component: () => import("../src/lib/registry/default/block/Dashboard06.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/block/Dashboard06.vue"],
+    },
+    "Dashboard07": {
+      name: "Dashboard07",
+      type: "components:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","textarea","label","toggle-group","breadcrumb","sheet","table","select","tooltip"],
+      component: () => import("../src/lib/registry/default/block/Dashboard07.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/block/Dashboard07.vue"],
+    },
   },  "new-york": {
     "AccordionDemo": {
       name: "AccordionDemo",
@@ -2314,5 +2335,26 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/block/Dashboard04.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/block/Dashboard04.vue"],
     },
+    "Dashboard05": {
+      name: "Dashboard05",
+      type: "components:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","breadcrumb","sheet","pagination","progress","separator","table","tabs","tooltip","checkbox"],
+      component: () => import("../src/lib/registry/new-york/block/Dashboard05.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/block/Dashboard05.vue"],
+    },
+    "Dashboard06": {
+      name: "Dashboard06",
+      type: "components:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","breadcrumb","sheet","table","tabs","tooltip"],
+      component: () => import("../src/lib/registry/new-york/block/Dashboard06.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/block/Dashboard06.vue"],
+    },
+    "Dashboard07": {
+      name: "Dashboard07",
+      type: "components:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","textarea","label","toggle-group","breadcrumb","sheet","table","select","tooltip"],
+      component: () => import("../src/lib/registry/new-york/block/Dashboard07.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/block/Dashboard07.vue"],
+    },
   },
 }
diff --git a/apps/www/src/lib/registry/default/block/Dashboard05.vue b/apps/www/src/lib/registry/default/block/Dashboard05.vue
new file mode 100644
index 00000000..73b8e8a8
--- /dev/null
+++ b/apps/www/src/lib/registry/default/block/Dashboard05.vue
@@ -0,0 +1,706 @@
+<script lang="ts">
+export const description = 'A order tracking page. The order page has a sidebar navigation and a main content area.'
+export const iframeHeight = '780px'
+export const containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import { 
+  ChevronLeft,
+  ChevronRight,
+  CircleUser,
+  Copy,
+  CreditCard,
+  File,
+  Home,
+  LineChart,
+  ListFilter,
+  MoreVertical,
+  Package,
+  Package2,
+  PanelLeft,
+  Search,
+  Settings,
+  ShoppingCart,
+  Truck,
+  Users2
+} from 'lucide-vue-next'
+
+import { Badge } from "@/lib/registry/default/ui/badge"
+import { Button } from '@/lib/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
+import { Input } from '@/lib/registry/default/ui/input'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/lib/registry/default/ui/breadcrumb"
+import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+import {
+  Pagination,
+  PaginationEllipsis,
+  PaginationFirst,
+  PaginationLast,
+  PaginationList,
+  PaginationListItem,
+  PaginationNext,
+  PaginationPrev,
+} from "@/lib/registry/default/ui/pagination"
+import { Progress } from "@/lib/registry/default/ui/progress"
+import { Separator } from "@/lib/registry/default/ui/separator"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/lib/registry/default/ui/table"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/lib/registry/default/ui/tabs"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/lib/registry/default/ui/tooltip"
+import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+</script>
+
+<template>
+  <div class="flex min-h-screen w-full flex-col bg-muted/40">
+    <aside class="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
+      <nav class="flex flex-col items-center gap-4 px-2 sm:py-5">
+        <a
+          href="#"
+          class="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
+        >
+          <Package2 class="h-4 w-4 transition-all group-hover:scale-110" />
+          <span class="sr-only">Acme Inc</span>
+        </a>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Home class="h-5 w-5" />
+              <span class="sr-only">Dashboard</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">Dashboard</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <ShoppingCart class="h-5 w-5" />
+              <span class="sr-only">Orders</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">Orders</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Package class="h-5 w-5" />
+              <span class="sr-only">Products</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">Products</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Users2 class="h-5 w-5" />
+              <span class="sr-only">Customers</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">Customers</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <LineChart class="h-5 w-5" />
+              <span class="sr-only">Analytics</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">Analytics</TooltipContent>
+        </Tooltip>
+      </nav>
+      <nav class="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Settings class="h-5 w-5" />
+              <span class="sr-only">Settings</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">Settings</TooltipContent>
+        </Tooltip>
+      </nav>
+    </aside>
+    <div class="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
+      <header class="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
+        <Sheet>
+          <SheetTrigger as-child>
+            <Button size="icon" variant="outline" class="sm:hidden">
+              <PanelLeft class="h-5 w-5" />
+              <span class="sr-only">Toggle Menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" class="sm:max-w-xs">
+            <nav class="grid gap-6 text-lg font-medium">
+              <a
+                href="#"
+                class="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
+              >
+                <Package2 class="h-5 w-5 transition-all group-hover:scale-110" />
+                <span class="sr-only">Acme Inc</span>
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <Home class="h-5 w-5" />
+                Dashboard
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-foreground"
+              >
+                <ShoppingCart class="h-5 w-5" />
+                Orders
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <Package class="h-5 w-5" />
+                Products
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <Users2 class="h-5 w-5" />
+                Customers
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <LineChart class="h-5 w-5" />
+                Settings
+              </a>
+            </nav>
+          </SheetContent>
+        </Sheet>
+        <Breadcrumb class="hidden md:flex">
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink as-child>
+                <a href="#">Dashboard</a>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink as-child>
+                <a href="#">Orders</a>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Recent Orders</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <div class="relative ml-auto flex-1 md:grow-0">
+          <Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="Search..."
+            class="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]"
+          />
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="secondary" size="icon" class="rounded-full">
+              <CircleUser class="h-5 w-5" />
+              <span class="sr-only">Toggle user menu</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Settings</DropdownMenuItem>
+            <DropdownMenuItem>Support</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Logout</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </header>
+      <main class="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
+        <div class="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
+          <div class="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
+            <Card class="sm:col-span-2">
+              <CardHeader class="pb-3">
+                <CardTitle>Your Orders</CardTitle>
+                <CardDescription class="max-w-lg text-balance leading-relaxed">
+                  Introducing Our Dynamic Orders Dashboard for Seamless
+                  Management and Insightful Analysis.
+                </CardDescription>
+              </CardHeader>
+              <CardFooter>
+                <Button>Create New Order</Button>
+              </CardFooter>
+            </Card>
+            <Card>
+              <CardHeader class="pb-2">
+                <CardDescription>This Week</CardDescription>
+                <CardTitle class="text-4xl">$1329</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div class="text-xs text-muted-foreground">
+                  +25% from last week
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Progress :model-value="25" aria-label="25% increase" />
+              </CardFooter>
+            </Card>
+            <Card>
+              <CardHeader class="pb-2">
+                <CardDescription>This Month</CardDescription>
+                <CardTitle class="text-3xl">$5,329</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div class="text-xs text-muted-foreground">
+                  +10% from last month
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Progress :model-value="12" aria-label="12% increase" />
+              </CardFooter>
+            </Card>
+          </div>
+          <Tabs defaultValue="week">
+            <div class="flex items-center">
+              <TabsList>
+                <TabsTrigger value="week">Week</TabsTrigger>
+                <TabsTrigger value="month">Month</TabsTrigger>
+                <TabsTrigger value="year">Year</TabsTrigger>
+              </TabsList>
+              <div class="ml-auto flex items-center gap-2">
+                <DropdownMenu>
+                  <DropdownMenuTrigger as-child>
+                    <Button variant="outline" size="sm" class="h-7 gap-1 rounded-md px-3">
+                      <ListFilter class="h-3.5 w-3.5" />
+                      <span class="sr-only sm:not-sr-only">Filter</span>
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem>
+                      <div class="items-top flex space-x-2">
+                        <Checkbox id="terms1"/>
+                        <label
+                          for="terms2"
+                          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                        >
+                          Fulfilled
+                        </label>
+                      </div>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <div class="items-top flex space-x-2">
+                        <Checkbox id="terms1"/>
+                        <label
+                          for="terms2"
+                          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                        >
+                          Declined
+                        </label>
+                      </div>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <div class="items-top flex space-x-2">
+                        <Checkbox id="terms1"/>
+                        <label
+                          for="terms2"
+                          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                        >
+                          Refunded
+                        </label>
+                      </div>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+                <Button variant="outline" size="sm" class="h-7 gap-1 rounded-md px-3">
+                  <File class="h-3.5 w-3.5" />
+                  <span class="sr-only sm:not-sr-only">Export</span>
+                </Button>
+              </div>
+            </div>
+            <TabsContent value="week">
+              <Card>
+                <CardHeader class="px-7">
+                  <CardTitle>Orders</CardTitle>
+                  <CardDescription>
+                    Recent orders from your store.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Customer</TableHead>
+                        <TableHead class="hidden sm:table-cell">
+                          Type
+                        </TableHead>
+                        <TableHead class="hidden sm:table-cell">
+                          Status
+                        </TableHead>
+                        <TableHead class="hidden md:table-cell">
+                          Date
+                        </TableHead>
+                        <TableHead class="text-right">Amount</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      <TableRow class="bg-accent">
+                        <TableCell>
+                          <div class="font-medium">Liam Johnson</div>
+                          <div class="hidden text-sm text-muted-foreground md:inline">
+                            liam@example.com
+                          </div>
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          Sale
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          <Badge class="text-xs" variant="secondary">
+                            Fulfilled
+                          </Badge>
+                        </TableCell>
+                        <TableCell class="hidden md:table-cell">
+                          2023-06-23
+                        </TableCell>
+                        <TableCell class="text-right">$250.00</TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell>
+                          <div class="font-medium">Olivia Smith</div>
+                          <div class="hidden text-sm text-muted-foreground md:inline">
+                            olivia@example.com
+                          </div>
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          Refund
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          <Badge class="text-xs" variant="outline">
+                            Declined
+                          </Badge>
+                        </TableCell>
+                        <TableCell class="hidden md:table-cell">
+                          2023-06-24
+                        </TableCell>
+                        <TableCell class="text-right">$150.00</TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell>
+                          <div class="font-medium">Noah Williams</div>
+                          <div class="hidden text-sm text-muted-foreground md:inline">
+                            noah@example.com
+                          </div>
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          Subscription
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          <Badge class="text-xs" variant="secondary">
+                            Fulfilled
+                          </Badge>
+                        </TableCell>
+                        <TableCell class="hidden md:table-cell">
+                          2023-06-25
+                        </TableCell>
+                        <TableCell class="text-right">$350.00</TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell>
+                          <div class="font-medium">Emma Brown</div>
+                          <div class="hidden text-sm text-muted-foreground md:inline">
+                            emma@example.com
+                          </div>
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          Sale
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          <Badge class="text-xs" variant="secondary">
+                            Fulfilled
+                          </Badge>
+                        </TableCell>
+                        <TableCell class="hidden md:table-cell">
+                          2023-06-26
+                        </TableCell>
+                        <TableCell class="text-right">$450.00</TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell>
+                          <div class="font-medium">Liam Johnson</div>
+                          <div class="hidden text-sm text-muted-foreground md:inline">
+                            liam@example.com
+                          </div>
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          Sale
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          <Badge class="text-xs" variant="secondary">
+                            Fulfilled
+                          </Badge>
+                        </TableCell>
+                        <TableCell class="hidden md:table-cell">
+                          2023-06-23
+                        </TableCell>
+                        <TableCell class="text-right">$250.00</TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell>
+                          <div class="font-medium">Liam Johnson</div>
+                          <div class="hidden text-sm text-muted-foreground md:inline">
+                            liam@example.com
+                          </div>
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          Sale
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          <Badge class="text-xs" variant="secondary">
+                            Fulfilled
+                          </Badge>
+                        </TableCell>
+                        <TableCell class="hidden md:table-cell">
+                          2023-06-23
+                        </TableCell>
+                        <TableCell class="text-right">$250.00</TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell>
+                          <div class="font-medium">Olivia Smith</div>
+                          <div class="hidden text-sm text-muted-foreground md:inline">
+                            olivia@example.com
+                          </div>
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          Refund
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          <Badge class="text-xs" variant="outline">
+                            Declined
+                          </Badge>
+                        </TableCell>
+                        <TableCell class="hidden md:table-cell">
+                          2023-06-24
+                        </TableCell>
+                        <TableCell class="text-right">$150.00</TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell>
+                          <div class="font-medium">Emma Brown</div>
+                          <div class="hidden text-sm text-muted-foreground md:inline">
+                            emma@example.com
+                          </div>
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          Sale
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          <Badge class="text-xs" variant="secondary">
+                            Fulfilled
+                          </Badge>
+                        </TableCell>
+                        <TableCell class="hidden md:table-cell">
+                          2023-06-26
+                        </TableCell>
+                        <TableCell class="text-right">$450.00</TableCell>
+                      </TableRow>
+                    </TableBody>
+                  </Table>
+                </CardContent>
+              </Card>
+            </TabsContent>
+          </Tabs>
+        </div>
+        <div>
+          <Card class="overflow-hidden">
+            <CardHeader class="flex flex-row items-start bg-muted/50">
+              <div class="grid gap-0.5">
+                <CardTitle class="group flex items-center gap-2 text-lg">
+                  Order ID: Oe31b70H
+                  <Button
+                    size="icon"
+                    variant="outline"
+                    class="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
+                  >
+                    <Copy class="h-3 w-3" />
+                    <span class="sr-only">Copy Order ID</span>
+                  </Button>
+                </CardTitle>
+                <CardDescription>Date: November 23, 2023</CardDescription>
+              </div>
+              <div class="ml-auto flex items-center gap-1">
+                <Button size="sm" variant="outline" class="h-8 gap-1">
+                  <Truck class="h-3.5 w-3.5" />
+                  <span class="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
+                    Track Order
+                  </span>
+                </Button>
+                <DropdownMenu>
+                  <DropdownMenuTrigger as-child>
+                    <Button size="icon" variant="outline" class="h-8 w-8">
+                      <MoreVertical class="h-3.5 w-3.5" />
+                      <span class="sr-only">More</span>
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem>Edit</DropdownMenuItem>
+                    <DropdownMenuItem>Export</DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem>Trash</DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </CardHeader>
+            <CardContent class="p-6 text-sm">
+              <div class="grid gap-3">
+                <div class="font-semibold">Order Details</div>
+                <ul class="grid gap-3">
+                  <li class="flex items-center justify-between">
+                    <span class="text-muted-foreground">
+                      Glimmer Lamps x <span>2</span>
+                    </span>
+                    <span>$250.00</span>
+                  </li>
+                  <li class="flex items-center justify-between">
+                    <span class="text-muted-foreground">
+                      Aqua Filters x <span>1</span>
+                    </span>
+                    <span>$49.00</span>
+                  </li>
+                </ul>
+                <Separator class="my-2" />
+                <ul class="grid gap-3">
+                  <li class="flex items-center justify-between">
+                    <span class="text-muted-foreground">Subtotal</span>
+                    <span>$299.00</span>
+                  </li>
+                  <li class="flex items-center justify-between">
+                    <span class="text-muted-foreground">Shipping</span>
+                    <span>$5.00</span>
+                  </li>
+                  <li class="flex items-center justify-between">
+                    <span class="text-muted-foreground">Tax</span>
+                    <span>$25.00</span>
+                  </li>
+                  <li class="flex items-center justify-between font-semibold">
+                    <span class="text-muted-foreground">Total</span>
+                    <span>$329.00</span>
+                  </li>
+                </ul>
+              </div>
+              <Separator class="my-4" />
+              <div class="grid grid-cols-2 gap-4">
+                <div class="grid gap-3">
+                  <div class="font-semibold">Shipping Information</div>
+                  <address class="grid gap-0.5 not-italic text-muted-foreground">
+                    <span>Liam Johnson</span>
+                    <span>1234 Main St.</span>
+                    <span>Anytown, CA 12345</span>
+                  </address>
+                </div>
+                <div class="grid auto-rows-max gap-3">
+                  <div class="font-semibold">Billing Information</div>
+                  <div class="text-muted-foreground">
+                    Same as shipping address
+                  </div>
+                </div>
+              </div>
+              <Separator class="my-4" />
+              <div class="grid gap-3">
+                <div class="font-semibold">Customer Information</div>
+                <dl class="grid gap-3">
+                  <div class="flex items-center justify-between">
+                    <dt class="text-muted-foreground">Customer</dt>
+                    <dd>Liam Johnson</dd>
+                  </div>
+                  <div class="flex items-center justify-between">
+                    <dt class="text-muted-foreground">Email</dt>
+                    <dd>
+                      <a href="mailto:">liam@acme.com</a>
+                    </dd>
+                  </div>
+                  <div class="flex items-center justify-between">
+                    <dt class="text-muted-foreground">Phone</dt>
+                    <dd>
+                      <a href="tel:">+1 234 567 890</a>
+                    </dd>
+                  </div>
+                </dl>
+              </div>
+              <Separator class="my-4" />
+              <div class="grid gap-3">
+                <div class="font-semibold">Payment Information</div>
+                <dl class="grid gap-3">
+                  <div class="flex items-center justify-between">
+                    <dt class="flex items-center gap-1 text-muted-foreground">
+                      <CreditCard class="h-4 w-4" />
+                      Visa
+                    </dt>
+                    <dd>**** **** **** 4532</dd>
+                  </div>
+                </dl>
+              </div>
+            </CardContent>
+            <CardFooter class="flex flex-row items-center border-t bg-muted/50 px-6 py-3">
+              <div class="text-xs text-muted-foreground">
+                Updated <time dateTime="2023-11-23">November 23, 2023</time>
+              </div>
+              <Pagination class="ml-auto mr-0 w-auto">
+                <PaginationList class="gap-1">
+                  <PaginationPrev variant="outline" class="h-6 w-6" />
+                  <PaginationNext variant="outline" class="h-6 w-6" />
+                </PaginationList>
+              </Pagination>
+            </CardFooter>
+          </Card>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/block/Dashboard06.vue b/apps/www/src/lib/registry/default/block/Dashboard06.vue
new file mode 100644
index 00000000..010fb60c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/block/Dashboard06.vue
@@ -0,0 +1,627 @@
+<script lang="ts">
+export const description = 'A products page.'
+export const iframeHeight = '780px'
+export const containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import {
+  CircleUser,
+  File,
+  Home,
+  LineChart,
+  ListFilter,
+  MoreHorizontal,
+  Package,
+  Package2,
+  PanelLeft,
+  PlusCircle,
+  Search,
+  Settings,
+  ShoppingCart,
+  Users2,
+} from 'lucide-vue-next'
+
+import { Badge } from '@/lib/registry/default/ui/badge'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
+import { Input } from '@/lib/registry/default/ui/input'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/lib/registry/default/ui/breadcrumb'
+import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/lib/registry/default/ui/table'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/lib/registry/default/ui/tabs'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/lib/registry/default/ui/tooltip'
+</script>
+
+<template>
+  <div class="flex min-h-screen w-full flex-col bg-muted/40">
+    <aside class="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
+      <nav class="flex flex-col items-center gap-4 px-2 py-4">
+        <a
+          href="#"
+          class="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
+        >
+          <Package2 class="h-4 w-4 transition-all group-hover:scale-110" />
+          <span class="sr-only">Acme Inc</span>
+        </a>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Home class="h-5 w-5" />
+              <span class="sr-only">Dashboard</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Dashboard
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <ShoppingCart class="h-5 w-5" />
+              <span class="sr-only">Orders</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Orders
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Package class="h-5 w-5" />
+              <span class="sr-only">Products</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Products
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Users2 class="h-5 w-5" />
+              <span class="sr-only">Customers</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Customers
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <LineChart class="h-5 w-5" />
+              <span class="sr-only">Analytics</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Analytics
+          </TooltipContent>
+        </Tooltip>
+      </nav>
+      <nav class="mt-auto flex flex-col items-center gap-4 px-2 py-4">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Settings class="h-5 w-5" />
+              <span class="sr-only">Settings</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Settings
+          </TooltipContent>
+        </Tooltip>
+      </nav>
+    </aside>
+    <div class="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
+      <header class="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
+        <Sheet>
+          <SheetTrigger as-child>
+            <Button size="icon" variant="outline" class="sm:hidden">
+              <PanelLeft class="h-5 w-5" />
+              <span class="sr-only">Toggle Menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" class="sm:max-w-xs">
+            <nav class="grid gap-6 text-lg font-medium">
+              <a
+                href="#"
+                class="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
+              >
+                <Package2 class="h-5 w-5 transition-all group-hover:scale-110" />
+                <span class="sr-only">Acme Inc</span>
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <Home class="h-5 w-5" />
+                Dashboard
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <ShoppingCart class="h-5 w-5" />
+                Orders
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-foreground"
+              >
+                <Package class="h-5 w-5" />
+                Products
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <Users2 class="h-5 w-5" />
+                Customers
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <LineChart class="h-5 w-5" />
+                Settings
+              </a>
+            </nav>
+          </SheetContent>
+        </Sheet>
+        <Breadcrumb class="hidden md:flex">
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink as-child>
+                <a href="#">Dashboard</a>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink as-child>
+                <a href="#">Products</a>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>All Products</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <div class="relative ml-auto flex-1 md:grow-0">
+          <Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="Search..."
+            class="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]"
+          />
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="secondary" size="icon" class="rounded-full">
+              <CircleUser class="h-5 w-5" />
+              <span class="sr-only">Toggle user menu</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Settings</DropdownMenuItem>
+            <DropdownMenuItem>Support</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Logout</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </header>
+      <main class="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
+        <Tabs default-value="all">
+          <div class="flex items-center">
+            <TabsList>
+              <TabsTrigger value="all">
+                All
+              </TabsTrigger>
+              <TabsTrigger value="active">
+                Active
+              </TabsTrigger>
+              <TabsTrigger value="draft">
+                Draft
+              </TabsTrigger>
+              <TabsTrigger value="archived" class="hidden sm:flex">
+                Archived
+              </TabsTrigger>
+            </TabsList>
+            <div class="ml-auto flex items-center gap-2">
+              <DropdownMenu>
+                <DropdownMenuTrigger as-child>
+                  <Button variant="outline" size="sm" class="h-7 gap-1">
+                    <ListFilter class="h-3.5 w-3.5" />
+                    <span class="sr-only sm:not-sr-only sm:whitespace-nowrap">
+                      Filter
+                    </span>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuLabel>Filter by</DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem checked>
+                    Active
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>Draft</DropdownMenuItem>
+                  <DropdownMenuItem>
+                    Archived
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <Button size="sm" variant="outline" class="h-7 gap-1">
+                <File class="h-3.5 w-3.5" />
+                <span class="sr-only sm:not-sr-only sm:whitespace-nowrap">
+                  Export
+                </span>
+              </Button>
+              <Button size="sm" class="h-7 gap-1">
+                <PlusCircle class="h-3.5 w-3.5" />
+                <span class="sr-only sm:not-sr-only sm:whitespace-nowrap">
+                  Add Product
+                </span>
+              </Button>
+            </div>
+          </div>
+          <TabsContent value="all">
+            <Card>
+              <CardHeader>
+                <CardTitle>Products</CardTitle>
+                <CardDescription>
+                  Manage your products and view their sales performance.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead class="hidden w-[100px] sm:table-cell">
+                        <span class="sr-only">img</span>
+                      </TableHead>
+                      <TableHead>Name</TableHead>
+                      <TableHead>Status</TableHead>
+                      <TableHead>Price</TableHead>
+                      <TableHead class="hidden md:table-cell">
+                        Total Sales
+                      </TableHead>
+                      <TableHead class="hidden md:table-cell">
+                        Created at
+                      </TableHead>
+                      <TableHead>
+                        <span class="sr-only">Actions</span>
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    <TableRow>
+                      <TableCell class="hidden sm:table-cell">
+                        <img
+                          alt="Product image"
+                          class="aspect-square rounded-md object-cover"
+                          height="64"
+                          src="/placeholder.svg"
+                          width="64"
+                        >
+                      </TableCell>
+                      <TableCell class="font-medium">
+                        Laser Lemonade Machine
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">
+                          Draft
+                        </Badge>
+                      </TableCell>
+                      <TableCell>$499.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        25
+                      </TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        2023-07-12 10:42 AM
+                      </TableCell>
+                      <TableCell>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger as-child>
+                            <Button
+                              aria-haspopup="true"
+                              size="icon"
+                              variant="ghost"
+                            >
+                              <MoreHorizontal class="h-4 w-4" />
+                              <span class="sr-only">Toggle menu</span>
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                            <DropdownMenuItem>Edit</DropdownMenuItem>
+                            <DropdownMenuItem>Delete</DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell class="hidden sm:table-cell">
+                        <img
+                          alt="Product image"
+                          class="aspect-square rounded-md object-cover"
+                          height="64"
+                          src="/placeholder.svg"
+                          width="64"
+                        >
+                      </TableCell>
+                      <TableCell class="font-medium">
+                        Hypernova Headphones
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">
+                          Active
+                        </Badge>
+                      </TableCell>
+                      <TableCell>$129.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        100
+                      </TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        2023-10-18 03:21 PM
+                      </TableCell>
+                      <TableCell>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger as-child>
+                            <Button
+                              aria-haspopup="true"
+                              size="icon"
+                              variant="ghost"
+                            >
+                              <MoreHorizontal class="h-4 w-4" />
+                              <span class="sr-only">Toggle menu</span>
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                            <DropdownMenuItem>Edit</DropdownMenuItem>
+                            <DropdownMenuItem>Delete</DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell class="hidden sm:table-cell">
+                        <img
+                          alt="Product image"
+                          class="aspect-square rounded-md object-cover"
+                          height="64"
+                          src="/placeholder.svg"
+                          width="64"
+                        >
+                      </TableCell>
+                      <TableCell class="font-medium">
+                        AeroGlow Desk Lamp
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">
+                          Active
+                        </Badge>
+                      </TableCell>
+                      <TableCell>$39.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        50
+                      </TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        2023-11-29 08:15 AM
+                      </TableCell>
+                      <TableCell>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger as-child>
+                            <Button
+                              aria-haspopup="true"
+                              size="icon"
+                              variant="ghost"
+                            >
+                              <MoreHorizontal class="h-4 w-4" />
+                              <span class="sr-only">Toggle menu</span>
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                            <DropdownMenuItem>Edit</DropdownMenuItem>
+                            <DropdownMenuItem>Delete</DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell class="hidden sm:table-cell">
+                        <img
+                          alt="Product image"
+                          class="aspect-square rounded-md object-cover"
+                          height="64"
+                          src="/placeholder.svg"
+                          width="64"
+                        >
+                      </TableCell>
+                      <TableCell class="font-medium">
+                        TechTonic Energy Drink
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="secondary">
+                          Draft
+                        </Badge>
+                      </TableCell>
+                      <TableCell>$2.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        0
+                      </TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        2023-12-25 11:59 PM
+                      </TableCell>
+                      <TableCell>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger as-child>
+                            <Button
+                              aria-haspopup="true"
+                              size="icon"
+                              variant="ghost"
+                            >
+                              <MoreHorizontal class="h-4 w-4" />
+                              <span class="sr-only">Toggle menu</span>
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                            <DropdownMenuItem>Edit</DropdownMenuItem>
+                            <DropdownMenuItem>Delete</DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell class="hidden sm:table-cell">
+                        <img
+                          alt="Product image"
+                          class="aspect-square rounded-md object-cover"
+                          height="64"
+                          src="/placeholder.svg"
+                          width="64"
+                        >
+                      </TableCell>
+                      <TableCell class="font-medium">
+                        Gamer Gear Pro Controller
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">
+                          Active
+                        </Badge>
+                      </TableCell>
+                      <TableCell>$59.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        75
+                      </TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        2024-01-01 12:00 AM
+                      </TableCell>
+                      <TableCell>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger as-child>
+                            <Button
+                              aria-haspopup="true"
+                              size="icon"
+                              variant="ghost"
+                            >
+                              <MoreHorizontal class="h-4 w-4" />
+                              <span class="sr-only">Toggle menu</span>
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                            <DropdownMenuItem>Edit</DropdownMenuItem>
+                            <DropdownMenuItem>Delete</DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell class="hidden sm:table-cell">
+                        <img
+                          alt="Product image"
+                          class="aspect-square rounded-md object-cover"
+                          height="64"
+                          src="/placeholder.svg"
+                          width="64"
+                        >
+                      </TableCell>
+                      <TableCell class="font-medium">
+                        Luminous VR Headset
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">
+                          Active
+                        </Badge>
+                      </TableCell>
+                      <TableCell>$199.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        30
+                      </TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        2024-02-14 02:14 PM
+                      </TableCell>
+                      <TableCell>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger as-child>
+                            <Button
+                              aria-haspopup="true"
+                              size="icon"
+                              variant="ghost"
+                            >
+                              <MoreHorizontal class="h-4 w-4" />
+                              <span class="sr-only">Toggle menu</span>
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                            <DropdownMenuItem>Edit</DropdownMenuItem>
+                            <DropdownMenuItem>Delete</DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </CardContent>
+              <CardFooter>
+                <div class="text-xs text-muted-foreground">
+                  Showing <strong>1-10</strong> of <strong>32</strong>
+                  products
+                </div>
+              </CardFooter>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </main>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/block/Dashboard07.vue b/apps/www/src/lib/registry/default/block/Dashboard07.vue
new file mode 100644
index 00000000..1b01e5aa
--- /dev/null
+++ b/apps/www/src/lib/registry/default/block/Dashboard07.vue
@@ -0,0 +1,629 @@
+<script lang="ts">
+export const description = 'A product details page.'
+export const iframeHeight = '780px'
+export const containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import {
+  ChevronLeft,
+  CircleUser,
+  Home,
+  LineChart,
+  Package,
+  Package2,
+  PanelLeft,
+  PlusCircle,
+  Search,
+  Settings,
+  ShoppingCart,
+  Upload,
+  Users2,
+} from 'lucide-vue-next'
+
+import { Badge } from '@/lib/registry/default/ui/badge'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Textarea } from '@/lib/registry/default/ui/textarea'
+import { Label } from '@/lib/registry/default/ui/label'
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/lib/registry/default/ui/breadcrumb'
+import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/lib/registry/default/ui/table'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/default/ui/select'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/lib/registry/default/ui/tooltip'
+</script>
+
+<template>
+  <div class="flex min-h-screen w-full flex-col bg-muted/40">
+    <aside class="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
+      <nav class="flex flex-col items-center gap-4 px-2 sm:py-5">
+        <a
+          href="#"
+          class="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
+        >
+          <Package2 class="h-4 w-4 transition-all group-hover:scale-110" />
+          <span class="sr-only">Acme Inc</span>
+        </a>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Home class="h-5 w-5" />
+              <span class="sr-only">Dashboard</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Dashboard
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <ShoppingCart class="h-5 w-5" />
+              <span class="sr-only">Orders</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Orders
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Package class="h-5 w-5" />
+              <span class="sr-only">Products</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Products
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Users2 class="h-5 w-5" />
+              <span class="sr-only">Customers</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Customers
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <LineChart class="h-5 w-5" />
+              <span class="sr-only">Analytics</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Analytics
+          </TooltipContent>
+        </Tooltip>
+      </nav>
+      <nav class="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Settings class="h-5 w-5" />
+              <span class="sr-only">Settings</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Settings
+          </TooltipContent>
+        </Tooltip>
+      </nav>
+    </aside>
+    <div class="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
+      <header class="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
+        <Sheet>
+          <SheetTrigger as-child>
+            <Button size="icon" variant="outline" class="sm:hidden">
+              <PanelLeft class="h-5 w-5" />
+              <span class="sr-only">Toggle Menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" class="sm:max-w-xs">
+            <nav class="grid gap-6 text-lg font-medium">
+              <a
+                href="#"
+                class="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
+              >
+                <Package2 class="h-5 w-5 transition-all group-hover:scale-110" />
+                <span class="sr-only">Acme Inc</span>
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <Home class="h-5 w-5" />
+                Dashboard
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <ShoppingCart class="h-5 w-5" />
+                Orders
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-foreground"
+              >
+                <Package class="h-5 w-5" />
+                Products
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <Users2 class="h-5 w-5" />
+                Customers
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <LineChart class="h-5 w-5" />
+                Settings
+              </a>
+            </nav>
+          </SheetContent>
+        </Sheet>
+        <Breadcrumb class="hidden md:flex">
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink as-child>
+                <a href="#">Dashboard</a>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink as-child>
+                <a href="#">Products</a>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Edit Product</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <div class="relative ml-auto flex-1 md:grow-0">
+          <Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="Search..."
+            class="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]"
+          />
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="secondary" size="icon" class="rounded-full">
+              <CircleUser class="h-5 w-5" />
+              <span class="sr-only">Toggle user menu</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Settings</DropdownMenuItem>
+            <DropdownMenuItem>Support</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Logout</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </header>
+      <main class="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
+        <div class="mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4">
+          <div class="flex items-center gap-4">
+            <Button variant="outline" size="icon" class="h-7 w-7">
+              <ChevronLeft class="h-4 w-4" />
+              <span class="sr-only">Back</span>
+            </Button>
+            <h1 class="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">
+              Pro Controller
+            </h1>
+            <Badge variant="outline" class="ml-auto sm:ml-0">
+              In stock
+            </Badge>
+            <div class="hidden items-center gap-2 md:ml-auto md:flex">
+              <Button variant="outline" size="sm">
+                Discard
+              </Button>
+              <Button size="sm">
+                Save Product
+              </Button>
+            </div>
+          </div>
+          <div class="grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8">
+            <div class="grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Product Details</CardTitle>
+                  <CardDescription>
+                    Lipsum dolor sit amet, consectetur adipiscing elit
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div class="grid gap-6">
+                    <div class="grid gap-3">
+                      <Label for="name">Name</Label>
+                      <Input
+                        id="name"
+                        type="text"
+                        class="w-full"
+                        default-value="Gamer Gear Pro Controller"
+                      />
+                    </div>
+                    <div class="grid gap-3">
+                      <Label for="description">Description</Label>
+                      <Textarea
+                        id="description"
+                        default-value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
+                        class="min-h-32"
+                      />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader>
+                  <CardTitle>Stock</CardTitle>
+                  <CardDescription>
+                    Lipsum dolor sit amet, consectetur adipiscing elit
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead class="w-[100px]">
+                          SKU
+                        </TableHead>
+                        <TableHead>Stock</TableHead>
+                        <TableHead>Price</TableHead>
+                        <TableHead class="w-[100px]">
+                          Size
+                        </TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      <TableRow>
+                        <TableCell class="font-semibold">
+                          GGPC-001
+                        </TableCell>
+                        <TableCell>
+                          <Label for="stock-1" class="sr-only">
+                            Stock
+                          </Label>
+                          <Input
+                            id="stock-1"
+                            type="number"
+                            default-value="100"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Label for="price-1" class="sr-only">
+                            Price
+                          </Label>
+                          <Input
+                            id="price-1"
+                            type="number"
+                            default-value="99.99"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <ToggleGroup
+                            type="single"
+                            default-value="s"
+                            variant="outline"
+                          >
+                            <ToggleGroupItem value="s">
+                              S
+                            </ToggleGroupItem>
+                            <ToggleGroupItem value="m">
+                              M
+                            </ToggleGroupItem>
+                            <ToggleGroupItem value="l">
+                              L
+                            </ToggleGroupItem>
+                          </ToggleGroup>
+                        </TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell class="font-semibold">
+                          GGPC-002
+                        </TableCell>
+                        <TableCell>
+                          <Label for="stock-2" class="sr-only">
+                            Stock
+                          </Label>
+                          <Input
+                            id="stock-2"
+                            type="number"
+                            default-value="143"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Label for="price-2" class="sr-only">
+                            Price
+                          </Label>
+                          <Input
+                            id="price-2"
+                            type="number"
+                            default-value="99.99"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <ToggleGroup
+                            type="single"
+                            default-value="m"
+                            variant="outline"
+                          >
+                            <ToggleGroupItem value="s">
+                              S
+                            </ToggleGroupItem>
+                            <ToggleGroupItem value="m">
+                              M
+                            </ToggleGroupItem>
+                            <ToggleGroupItem value="l">
+                              L
+                            </ToggleGroupItem>
+                          </ToggleGroup>
+                        </TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell class="font-semibold">
+                          GGPC-003
+                        </TableCell>
+                        <TableCell>
+                          <Label for="stock-3" class="sr-only">
+                            Stock
+                          </Label>
+                          <Input
+                            id="stock-3"
+                            type="number"
+                            default-value="32"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Label for="price-3" class="sr-only">
+                            Stock
+                          </Label>
+                          <Input
+                            id="price-3"
+                            type="number"
+                            default-value="99.99"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <ToggleGroup
+                            type="single"
+                            default-value="s"
+                            variant="outline"
+                          >
+                            <ToggleGroupItem value="s">
+                              S
+                            </ToggleGroupItem>
+                            <ToggleGroupItem value="m">
+                              M
+                            </ToggleGroupItem>
+                            <ToggleGroupItem value="l">
+                              L
+                            </ToggleGroupItem>
+                          </ToggleGroup>
+                        </TableCell>
+                      </TableRow>
+                    </TableBody>
+                  </Table>
+                </CardContent>
+                <CardFooter class="justify-center border-t p-4">
+                  <Button size="sm" variant="ghost" class="gap-1">
+                    <PlusCircle class="h-3.5 w-3.5" />
+                    Add Variant
+                  </Button>
+                </CardFooter>
+              </Card>
+              <Card>
+                <CardHeader>
+                  <CardTitle>Product Category</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div class="grid gap-6 sm:grid-cols-3">
+                    <div class="grid gap-3">
+                      <Label for="category">Category</Label>
+                      <Select>
+                        <SelectTrigger
+                          id="category"
+                          aria-label="Select category"
+                        >
+                          <SelectValue placeholder="Select category" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="clothing">
+                            Clothing
+                          </SelectItem>
+                          <SelectItem value="electronics">
+                            Electronics
+                          </SelectItem>
+                          <SelectItem value="accessories">
+                            Accessories
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div class="grid gap-3">
+                      <Label for="subcategory">
+                        Subcategory (optional)
+                      </Label>
+                      <Select>
+                        <SelectTrigger
+                          id="subcategory"
+                          aria-label="Select subcategory"
+                        >
+                          <SelectValue placeholder="Select subcategory" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="t-shirts">
+                            T-Shirts
+                          </SelectItem>
+                          <SelectItem value="hoodies">
+                            Hoodies
+                          </SelectItem>
+                          <SelectItem value="sweatshirts">
+                            Sweatshirts
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+            <div class="grid auto-rows-max items-start gap-4 lg:gap-8">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Product Status</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div class="grid gap-6">
+                    <div class="grid gap-3">
+                      <Label for="status">Status</Label>
+                      <Select>
+                        <SelectTrigger id="status" aria-label="Select status">
+                          <SelectValue placeholder="Select status" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="draft">
+                            Draft
+                          </SelectItem>
+                          <SelectItem value="published">
+                            Active
+                          </SelectItem>
+                          <SelectItem value="archived">
+                            Archived
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+              <Card class="overflow-hidden">
+                <CardHeader>
+                  <CardTitle>Product imgs</CardTitle>
+                  <CardDescription>
+                    Lipsum dolor sit amet, consectetur adipiscing elit
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div class="grid gap-2">
+                    <img
+                      alt="Product image"
+                      class="aspect-square w-full rounded-md object-cover"
+                      height="300"
+                      src="/placeholder.svg"
+                      width="300"
+                    >
+                    <div class="grid grid-cols-3 gap-2">
+                      <button>
+                        <img
+                          alt="Product image"
+                          class="aspect-square w-full rounded-md object-cover"
+                          height="84"
+                          src="/placeholder.svg"
+                          width="84"
+                        >
+                      </button>
+                      <button>
+                        <img
+                          alt="Product image"
+                          class="aspect-square w-full rounded-md object-cover"
+                          height="84"
+                          src="/placeholder.svg"
+                          width="84"
+                        >
+                      </button>
+                      <button class="flex aspect-square w-full items-center justify-center rounded-md border border-dashed">
+                        <Upload class="h-4 w-4 text-muted-foreground" />
+                        <span class="sr-only">Upload</span>
+                      </button>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader>
+                  <CardTitle>Archive Product</CardTitle>
+                  <CardDescription>
+                    Lipsum dolor sit amet, consectetur adipiscing elit.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div />
+                  <Button size="sm" variant="secondary">
+                    Archive Product
+                  </Button>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+          <div class="flex items-center justify-center gap-2 md:hidden">
+            <Button variant="outline" size="sm">
+              Discard
+            </Button>
+            <Button size="sm">
+              Save Product
+            </Button>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard05.vue b/apps/www/src/lib/registry/new-york/block/Dashboard05.vue
new file mode 100644
index 00000000..91c2ab31
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard05.vue
@@ -0,0 +1,772 @@
+<script lang="ts">
+export const description = 'A order tracking page. The order page has a sidebar navigation and a main content area.'
+export const iframeHeight = '780px'
+export const containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import {
+  CircleUser,
+  Copy,
+  CreditCard,
+  File,
+  Home,
+  LineChart,
+  ListFilter,
+  MoreVertical,
+  Package,
+  Package2,
+  PanelLeft,
+  Search,
+  Settings,
+  ShoppingCart,
+  Truck,
+  Users2,
+} from 'lucide-vue-next'
+
+import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/lib/registry/new-york/ui/breadcrumb'
+import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
+import {
+  Pagination,
+  PaginationList,
+  PaginationNext,
+  PaginationPrev,
+} from '@/lib/registry/new-york/ui/pagination'
+import { Progress } from '@/lib/registry/new-york/ui/progress'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/lib/registry/new-york/ui/table'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/lib/registry/new-york/ui/tabs'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/lib/registry/new-york/ui/tooltip'
+import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+</script>
+
+<template>
+  <div class="flex min-h-screen w-full flex-col bg-muted/40">
+    <aside class="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
+      <nav class="flex flex-col items-center gap-4 px-2 sm:py-5">
+        <a
+          href="#"
+          class="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
+        >
+          <Package2 class="h-4 w-4 transition-all group-hover:scale-110" />
+          <span class="sr-only">Acme Inc</span>
+        </a>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Home class="h-5 w-5" />
+              <span class="sr-only">Dashboard</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Dashboard
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <ShoppingCart class="h-5 w-5" />
+              <span class="sr-only">Orders</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Orders
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Package class="h-5 w-5" />
+              <span class="sr-only">Products</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Products
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Users2 class="h-5 w-5" />
+              <span class="sr-only">Customers</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Customers
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <LineChart class="h-5 w-5" />
+              <span class="sr-only">Analytics</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Analytics
+          </TooltipContent>
+        </Tooltip>
+      </nav>
+      <nav class="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Settings class="h-5 w-5" />
+              <span class="sr-only">Settings</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Settings
+          </TooltipContent>
+        </Tooltip>
+      </nav>
+    </aside>
+    <div class="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
+      <header class="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
+        <Sheet>
+          <SheetTrigger as-child>
+            <Button size="icon" variant="outline" class="sm:hidden">
+              <PanelLeft class="h-5 w-5" />
+              <span class="sr-only">Toggle Menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" class="sm:max-w-xs">
+            <nav class="grid gap-6 text-lg font-medium">
+              <a
+                href="#"
+                class="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
+              >
+                <Package2 class="h-5 w-5 transition-all group-hover:scale-110" />
+                <span class="sr-only">Acme Inc</span>
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <Home class="h-5 w-5" />
+                Dashboard
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-foreground"
+              >
+                <ShoppingCart class="h-5 w-5" />
+                Orders
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <Package class="h-5 w-5" />
+                Products
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <Users2 class="h-5 w-5" />
+                Customers
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <LineChart class="h-5 w-5" />
+                Settings
+              </a>
+            </nav>
+          </SheetContent>
+        </Sheet>
+        <Breadcrumb class="hidden md:flex">
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink as-child>
+                <a href="#">Dashboard</a>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink as-child>
+                <a href="#">Orders</a>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Recent Orders</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <div class="relative ml-auto flex-1 md:grow-0">
+          <Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="Search..."
+            class="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]"
+          />
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="secondary" size="icon" class="rounded-full">
+              <CircleUser class="h-5 w-5" />
+              <span class="sr-only">Toggle user menu</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Settings</DropdownMenuItem>
+            <DropdownMenuItem>Support</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Logout</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </header>
+      <main class="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3">
+        <div class="grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2">
+          <div class="grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4">
+            <Card class="sm:col-span-2">
+              <CardHeader class="pb-3">
+                <CardTitle>Your Orders</CardTitle>
+                <CardDescription class="max-w-lg text-balance leading-relaxed">
+                  Introducing Our Dynamic Orders Dashboard for Seamless
+                  Management and Insightful Analysis.
+                </CardDescription>
+              </CardHeader>
+              <CardFooter>
+                <Button>Create New Order</Button>
+              </CardFooter>
+            </Card>
+            <Card>
+              <CardHeader class="pb-2">
+                <CardDescription>This Week</CardDescription>
+                <CardTitle class="text-4xl">
+                  $1329
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div class="text-xs text-muted-foreground">
+                  +25% from last week
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Progress :model-value="25" aria-label="25% increase" />
+              </CardFooter>
+            </Card>
+            <Card>
+              <CardHeader class="pb-2">
+                <CardDescription>This Month</CardDescription>
+                <CardTitle class="text-3xl">
+                  $5,329
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div class="text-xs text-muted-foreground">
+                  +10% from last month
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Progress :model-value="12" aria-label="12% increase" />
+              </CardFooter>
+            </Card>
+          </div>
+          <Tabs default-value="week">
+            <div class="flex items-center">
+              <TabsList>
+                <TabsTrigger value="week">
+                  Week
+                </TabsTrigger>
+                <TabsTrigger value="month">
+                  Month
+                </TabsTrigger>
+                <TabsTrigger value="year">
+                  Year
+                </TabsTrigger>
+              </TabsList>
+              <div class="ml-auto flex items-center gap-2">
+                <DropdownMenu>
+                  <DropdownMenuTrigger as-child>
+                    <Button variant="outline" size="sm" class="h-7 gap-1 rounded-md px-3">
+                      <ListFilter class="h-3.5 w-3.5" />
+                      <span class="sr-only sm:not-sr-only">Filter</span>
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem>
+                      <div class="items-top flex space-x-2">
+                        <Checkbox id="terms1" />
+                        <label
+                          for="terms2"
+                          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                        >
+                          Fulfilled
+                        </label>
+                      </div>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <div class="items-top flex space-x-2">
+                        <Checkbox id="terms1" />
+                        <label
+                          for="terms2"
+                          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                        >
+                          Declined
+                        </label>
+                      </div>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <div class="items-top flex space-x-2">
+                        <Checkbox id="terms1" />
+                        <label
+                          for="terms2"
+                          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                        >
+                          Refunded
+                        </label>
+                      </div>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+                <Button variant="outline" size="sm" class="h-7 gap-1 rounded-md px-3">
+                  <File class="h-3.5 w-3.5" />
+                  <span class="sr-only sm:not-sr-only">Export</span>
+                </Button>
+              </div>
+            </div>
+            <TabsContent value="week">
+              <Card>
+                <CardHeader class="px-7">
+                  <CardTitle>Orders</CardTitle>
+                  <CardDescription>
+                    Recent orders from your store.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Customer</TableHead>
+                        <TableHead class="hidden sm:table-cell">
+                          Type
+                        </TableHead>
+                        <TableHead class="hidden sm:table-cell">
+                          Status
+                        </TableHead>
+                        <TableHead class="hidden md:table-cell">
+                          Date
+                        </TableHead>
+                        <TableHead class="text-right">
+                          Amount
+                        </TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      <TableRow class="bg-accent">
+                        <TableCell>
+                          <div class="font-medium">
+                            Liam Johnson
+                          </div>
+                          <div class="hidden text-sm text-muted-foreground md:inline">
+                            liam@example.com
+                          </div>
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          Sale
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          <Badge class="text-xs" variant="secondary">
+                            Fulfilled
+                          </Badge>
+                        </TableCell>
+                        <TableCell class="hidden md:table-cell">
+                          2023-06-23
+                        </TableCell>
+                        <TableCell class="text-right">
+                          $250.00
+                        </TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell>
+                          <div class="font-medium">
+                            Olivia Smith
+                          </div>
+                          <div class="hidden text-sm text-muted-foreground md:inline">
+                            olivia@example.com
+                          </div>
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          Refund
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          <Badge class="text-xs" variant="outline">
+                            Declined
+                          </Badge>
+                        </TableCell>
+                        <TableCell class="hidden md:table-cell">
+                          2023-06-24
+                        </TableCell>
+                        <TableCell class="text-right">
+                          $150.00
+                        </TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell>
+                          <div class="font-medium">
+                            Noah Williams
+                          </div>
+                          <div class="hidden text-sm text-muted-foreground md:inline">
+                            noah@example.com
+                          </div>
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          Subscription
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          <Badge class="text-xs" variant="secondary">
+                            Fulfilled
+                          </Badge>
+                        </TableCell>
+                        <TableCell class="hidden md:table-cell">
+                          2023-06-25
+                        </TableCell>
+                        <TableCell class="text-right">
+                          $350.00
+                        </TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell>
+                          <div class="font-medium">
+                            Emma Brown
+                          </div>
+                          <div class="hidden text-sm text-muted-foreground md:inline">
+                            emma@example.com
+                          </div>
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          Sale
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          <Badge class="text-xs" variant="secondary">
+                            Fulfilled
+                          </Badge>
+                        </TableCell>
+                        <TableCell class="hidden md:table-cell">
+                          2023-06-26
+                        </TableCell>
+                        <TableCell class="text-right">
+                          $450.00
+                        </TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell>
+                          <div class="font-medium">
+                            Liam Johnson
+                          </div>
+                          <div class="hidden text-sm text-muted-foreground md:inline">
+                            liam@example.com
+                          </div>
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          Sale
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          <Badge class="text-xs" variant="secondary">
+                            Fulfilled
+                          </Badge>
+                        </TableCell>
+                        <TableCell class="hidden md:table-cell">
+                          2023-06-23
+                        </TableCell>
+                        <TableCell class="text-right">
+                          $250.00
+                        </TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell>
+                          <div class="font-medium">
+                            Liam Johnson
+                          </div>
+                          <div class="hidden text-sm text-muted-foreground md:inline">
+                            liam@example.com
+                          </div>
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          Sale
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          <Badge class="text-xs" variant="secondary">
+                            Fulfilled
+                          </Badge>
+                        </TableCell>
+                        <TableCell class="hidden md:table-cell">
+                          2023-06-23
+                        </TableCell>
+                        <TableCell class="text-right">
+                          $250.00
+                        </TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell>
+                          <div class="font-medium">
+                            Olivia Smith
+                          </div>
+                          <div class="hidden text-sm text-muted-foreground md:inline">
+                            olivia@example.com
+                          </div>
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          Refund
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          <Badge class="text-xs" variant="outline">
+                            Declined
+                          </Badge>
+                        </TableCell>
+                        <TableCell class="hidden md:table-cell">
+                          2023-06-24
+                        </TableCell>
+                        <TableCell class="text-right">
+                          $150.00
+                        </TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell>
+                          <div class="font-medium">
+                            Emma Brown
+                          </div>
+                          <div class="hidden text-sm text-muted-foreground md:inline">
+                            emma@example.com
+                          </div>
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          Sale
+                        </TableCell>
+                        <TableCell class="hidden sm:table-cell">
+                          <Badge class="text-xs" variant="secondary">
+                            Fulfilled
+                          </Badge>
+                        </TableCell>
+                        <TableCell class="hidden md:table-cell">
+                          2023-06-26
+                        </TableCell>
+                        <TableCell class="text-right">
+                          $450.00
+                        </TableCell>
+                      </TableRow>
+                    </TableBody>
+                  </Table>
+                </CardContent>
+              </Card>
+            </TabsContent>
+          </Tabs>
+        </div>
+        <div>
+          <Card class="overflow-hidden">
+            <CardHeader class="flex flex-row items-start bg-muted/50">
+              <div class="grid gap-0.5">
+                <CardTitle class="group flex items-center gap-2 text-lg">
+                  Order ID: Oe31b70H
+                  <Button
+                    size="icon"
+                    variant="outline"
+                    class="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
+                  >
+                    <Copy class="h-3 w-3" />
+                    <span class="sr-only">Copy Order ID</span>
+                  </Button>
+                </CardTitle>
+                <CardDescription>Date: November 23, 2023</CardDescription>
+              </div>
+              <div class="ml-auto flex items-center gap-1">
+                <Button size="sm" variant="outline" class="h-8 gap-1">
+                  <Truck class="h-3.5 w-3.5" />
+                  <span class="lg:sr-only xl:not-sr-only xl:whitespace-nowrap">
+                    Track Order
+                  </span>
+                </Button>
+                <DropdownMenu>
+                  <DropdownMenuTrigger as-child>
+                    <Button size="icon" variant="outline" class="h-8 w-8">
+                      <MoreVertical class="h-3.5 w-3.5" />
+                      <span class="sr-only">More</span>
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem>Edit</DropdownMenuItem>
+                    <DropdownMenuItem>Export</DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem>Trash</DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+            </CardHeader>
+            <CardContent class="p-6 text-sm">
+              <div class="grid gap-3">
+                <div class="font-semibold">
+                  Order Details
+                </div>
+                <ul class="grid gap-3">
+                  <li class="flex items-center justify-between">
+                    <span class="text-muted-foreground">
+                      Glimmer Lamps x <span>2</span>
+                    </span>
+                    <span>$250.00</span>
+                  </li>
+                  <li class="flex items-center justify-between">
+                    <span class="text-muted-foreground">
+                      Aqua Filters x <span>1</span>
+                    </span>
+                    <span>$49.00</span>
+                  </li>
+                </ul>
+                <Separator class="my-2" />
+                <ul class="grid gap-3">
+                  <li class="flex items-center justify-between">
+                    <span class="text-muted-foreground">Subtotal</span>
+                    <span>$299.00</span>
+                  </li>
+                  <li class="flex items-center justify-between">
+                    <span class="text-muted-foreground">Shipping</span>
+                    <span>$5.00</span>
+                  </li>
+                  <li class="flex items-center justify-between">
+                    <span class="text-muted-foreground">Tax</span>
+                    <span>$25.00</span>
+                  </li>
+                  <li class="flex items-center justify-between font-semibold">
+                    <span class="text-muted-foreground">Total</span>
+                    <span>$329.00</span>
+                  </li>
+                </ul>
+              </div>
+              <Separator class="my-4" />
+              <div class="grid grid-cols-2 gap-4">
+                <div class="grid gap-3">
+                  <div class="font-semibold">
+                    Shipping Information
+                  </div>
+                  <address class="grid gap-0.5 not-italic text-muted-foreground">
+                    <span>Liam Johnson</span>
+                    <span>1234 Main St.</span>
+                    <span>Anytown, CA 12345</span>
+                  </address>
+                </div>
+                <div class="grid auto-rows-max gap-3">
+                  <div class="font-semibold">
+                    Billing Information
+                  </div>
+                  <div class="text-muted-foreground">
+                    Same as shipping address
+                  </div>
+                </div>
+              </div>
+              <Separator class="my-4" />
+              <div class="grid gap-3">
+                <div class="font-semibold">
+                  Customer Information
+                </div>
+                <dl class="grid gap-3">
+                  <div class="flex items-center justify-between">
+                    <dt class="text-muted-foreground">
+                      Customer
+                    </dt>
+                    <dd>Liam Johnson</dd>
+                  </div>
+                  <div class="flex items-center justify-between">
+                    <dt class="text-muted-foreground">
+                      Email
+                    </dt>
+                    <dd>
+                      <a href="mailto:">liam@acme.com</a>
+                    </dd>
+                  </div>
+                  <div class="flex items-center justify-between">
+                    <dt class="text-muted-foreground">
+                      Phone
+                    </dt>
+                    <dd>
+                      <a href="tel:">+1 234 567 890</a>
+                    </dd>
+                  </div>
+                </dl>
+              </div>
+              <Separator class="my-4" />
+              <div class="grid gap-3">
+                <div class="font-semibold">
+                  Payment Information
+                </div>
+                <dl class="grid gap-3">
+                  <div class="flex items-center justify-between">
+                    <dt class="flex items-center gap-1 text-muted-foreground">
+                      <CreditCard class="h-4 w-4" />
+                      Visa
+                    </dt>
+                    <dd>**** **** **** 4532</dd>
+                  </div>
+                </dl>
+              </div>
+            </CardContent>
+            <CardFooter class="flex flex-row items-center border-t bg-muted/50 px-6 py-3">
+              <div class="text-xs text-muted-foreground">
+                Updated <time dateTime="2023-11-23">November 23, 2023</time>
+              </div>
+              <Pagination class="ml-auto mr-0 w-auto">
+                <PaginationList class="gap-1">
+                  <PaginationPrev variant="outline" class="h-6 w-6" />
+                  <PaginationNext variant="outline" class="h-6 w-6" />
+                </PaginationList>
+              </Pagination>
+            </CardFooter>
+          </Card>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard06.vue b/apps/www/src/lib/registry/new-york/block/Dashboard06.vue
new file mode 100644
index 00000000..66458fb8
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard06.vue
@@ -0,0 +1,627 @@
+<script lang="ts">
+export const description = 'A products page.'
+export const iframeHeight = '780px'
+export const containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import {
+  CircleUser,
+  File,
+  Home,
+  LineChart,
+  ListFilter,
+  MoreHorizontal,
+  Package,
+  Package2,
+  PanelLeft,
+  PlusCircle,
+  Search,
+  Settings,
+  ShoppingCart,
+  Users2,
+} from 'lucide-vue-next'
+
+import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/lib/registry/new-york/ui/breadcrumb'
+import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/lib/registry/new-york/ui/table'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/lib/registry/new-york/ui/tabs'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/lib/registry/new-york/ui/tooltip'
+</script>
+
+<template>
+  <div class="flex min-h-screen w-full flex-col bg-muted/40">
+    <aside class="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
+      <nav class="flex flex-col items-center gap-4 px-2 py-4">
+        <a
+          href="#"
+          class="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
+        >
+          <Package2 class="h-4 w-4 transition-all group-hover:scale-110" />
+          <span class="sr-only">Acme Inc</span>
+        </a>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Home class="h-5 w-5" />
+              <span class="sr-only">Dashboard</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Dashboard
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <ShoppingCart class="h-5 w-5" />
+              <span class="sr-only">Orders</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Orders
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Package class="h-5 w-5" />
+              <span class="sr-only">Products</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Products
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Users2 class="h-5 w-5" />
+              <span class="sr-only">Customers</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Customers
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <LineChart class="h-5 w-5" />
+              <span class="sr-only">Analytics</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Analytics
+          </TooltipContent>
+        </Tooltip>
+      </nav>
+      <nav class="mt-auto flex flex-col items-center gap-4 px-2 py-4">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Settings class="h-5 w-5" />
+              <span class="sr-only">Settings</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Settings
+          </TooltipContent>
+        </Tooltip>
+      </nav>
+    </aside>
+    <div class="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
+      <header class="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
+        <Sheet>
+          <SheetTrigger as-child>
+            <Button size="icon" variant="outline" class="sm:hidden">
+              <PanelLeft class="h-5 w-5" />
+              <span class="sr-only">Toggle Menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" class="sm:max-w-xs">
+            <nav class="grid gap-6 text-lg font-medium">
+              <a
+                href="#"
+                class="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
+              >
+                <Package2 class="h-5 w-5 transition-all group-hover:scale-110" />
+                <span class="sr-only">Acme Inc</span>
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <Home class="h-5 w-5" />
+                Dashboard
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <ShoppingCart class="h-5 w-5" />
+                Orders
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-foreground"
+              >
+                <Package class="h-5 w-5" />
+                Products
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <Users2 class="h-5 w-5" />
+                Customers
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <LineChart class="h-5 w-5" />
+                Settings
+              </a>
+            </nav>
+          </SheetContent>
+        </Sheet>
+        <Breadcrumb class="hidden md:flex">
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink as-child>
+                <a href="#">Dashboard</a>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink as-child>
+                <a href="#">Products</a>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>All Products</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <div class="relative ml-auto flex-1 md:grow-0">
+          <Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="Search..."
+            class="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]"
+          />
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="secondary" size="icon" class="rounded-full">
+              <CircleUser class="h-5 w-5" />
+              <span class="sr-only">Toggle user menu</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Settings</DropdownMenuItem>
+            <DropdownMenuItem>Support</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Logout</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </header>
+      <main class="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
+        <Tabs default-value="all">
+          <div class="flex items-center">
+            <TabsList>
+              <TabsTrigger value="all">
+                All
+              </TabsTrigger>
+              <TabsTrigger value="active">
+                Active
+              </TabsTrigger>
+              <TabsTrigger value="draft">
+                Draft
+              </TabsTrigger>
+              <TabsTrigger value="archived" class="hidden sm:flex">
+                Archived
+              </TabsTrigger>
+            </TabsList>
+            <div class="ml-auto flex items-center gap-2">
+              <DropdownMenu>
+                <DropdownMenuTrigger as-child>
+                  <Button variant="outline" size="sm" class="h-7 gap-1">
+                    <ListFilter class="h-3.5 w-3.5" />
+                    <span class="sr-only sm:not-sr-only sm:whitespace-nowrap">
+                      Filter
+                    </span>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuLabel>Filter by</DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem checked>
+                    Active
+                  </DropdownMenuItem>
+                  <DropdownMenuItem>Draft</DropdownMenuItem>
+                  <DropdownMenuItem>
+                    Archived
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+              <Button size="sm" variant="outline" class="h-7 gap-1">
+                <File class="h-3.5 w-3.5" />
+                <span class="sr-only sm:not-sr-only sm:whitespace-nowrap">
+                  Export
+                </span>
+              </Button>
+              <Button size="sm" class="h-7 gap-1">
+                <PlusCircle class="h-3.5 w-3.5" />
+                <span class="sr-only sm:not-sr-only sm:whitespace-nowrap">
+                  Add Product
+                </span>
+              </Button>
+            </div>
+          </div>
+          <TabsContent value="all">
+            <Card>
+              <CardHeader>
+                <CardTitle>Products</CardTitle>
+                <CardDescription>
+                  Manage your products and view their sales performance.
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead class="hidden w-[100px] sm:table-cell">
+                        <span class="sr-only">img</span>
+                      </TableHead>
+                      <TableHead>Name</TableHead>
+                      <TableHead>Status</TableHead>
+                      <TableHead>Price</TableHead>
+                      <TableHead class="hidden md:table-cell">
+                        Total Sales
+                      </TableHead>
+                      <TableHead class="hidden md:table-cell">
+                        Created at
+                      </TableHead>
+                      <TableHead>
+                        <span class="sr-only">Actions</span>
+                      </TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    <TableRow>
+                      <TableCell class="hidden sm:table-cell">
+                        <img
+                          alt="Product image"
+                          class="aspect-square rounded-md object-cover"
+                          height="64"
+                          src="/placeholder.svg"
+                          width="64"
+                        >
+                      </TableCell>
+                      <TableCell class="font-medium">
+                        Laser Lemonade Machine
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">
+                          Draft
+                        </Badge>
+                      </TableCell>
+                      <TableCell>$499.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        25
+                      </TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        2023-07-12 10:42 AM
+                      </TableCell>
+                      <TableCell>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger as-child>
+                            <Button
+                              aria-haspopup="true"
+                              size="icon"
+                              variant="ghost"
+                            >
+                              <MoreHorizontal class="h-4 w-4" />
+                              <span class="sr-only">Toggle menu</span>
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                            <DropdownMenuItem>Edit</DropdownMenuItem>
+                            <DropdownMenuItem>Delete</DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell class="hidden sm:table-cell">
+                        <img
+                          alt="Product image"
+                          class="aspect-square rounded-md object-cover"
+                          height="64"
+                          src="/placeholder.svg"
+                          width="64"
+                        >
+                      </TableCell>
+                      <TableCell class="font-medium">
+                        Hypernova Headphones
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">
+                          Active
+                        </Badge>
+                      </TableCell>
+                      <TableCell>$129.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        100
+                      </TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        2023-10-18 03:21 PM
+                      </TableCell>
+                      <TableCell>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger as-child>
+                            <Button
+                              aria-haspopup="true"
+                              size="icon"
+                              variant="ghost"
+                            >
+                              <MoreHorizontal class="h-4 w-4" />
+                              <span class="sr-only">Toggle menu</span>
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                            <DropdownMenuItem>Edit</DropdownMenuItem>
+                            <DropdownMenuItem>Delete</DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell class="hidden sm:table-cell">
+                        <img
+                          alt="Product image"
+                          class="aspect-square rounded-md object-cover"
+                          height="64"
+                          src="/placeholder.svg"
+                          width="64"
+                        >
+                      </TableCell>
+                      <TableCell class="font-medium">
+                        AeroGlow Desk Lamp
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">
+                          Active
+                        </Badge>
+                      </TableCell>
+                      <TableCell>$39.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        50
+                      </TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        2023-11-29 08:15 AM
+                      </TableCell>
+                      <TableCell>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger as-child>
+                            <Button
+                              aria-haspopup="true"
+                              size="icon"
+                              variant="ghost"
+                            >
+                              <MoreHorizontal class="h-4 w-4" />
+                              <span class="sr-only">Toggle menu</span>
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                            <DropdownMenuItem>Edit</DropdownMenuItem>
+                            <DropdownMenuItem>Delete</DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell class="hidden sm:table-cell">
+                        <img
+                          alt="Product image"
+                          class="aspect-square rounded-md object-cover"
+                          height="64"
+                          src="/placeholder.svg"
+                          width="64"
+                        >
+                      </TableCell>
+                      <TableCell class="font-medium">
+                        TechTonic Energy Drink
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="secondary">
+                          Draft
+                        </Badge>
+                      </TableCell>
+                      <TableCell>$2.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        0
+                      </TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        2023-12-25 11:59 PM
+                      </TableCell>
+                      <TableCell>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger as-child>
+                            <Button
+                              aria-haspopup="true"
+                              size="icon"
+                              variant="ghost"
+                            >
+                              <MoreHorizontal class="h-4 w-4" />
+                              <span class="sr-only">Toggle menu</span>
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                            <DropdownMenuItem>Edit</DropdownMenuItem>
+                            <DropdownMenuItem>Delete</DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell class="hidden sm:table-cell">
+                        <img
+                          alt="Product image"
+                          class="aspect-square rounded-md object-cover"
+                          height="64"
+                          src="/placeholder.svg"
+                          width="64"
+                        >
+                      </TableCell>
+                      <TableCell class="font-medium">
+                        Gamer Gear Pro Controller
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">
+                          Active
+                        </Badge>
+                      </TableCell>
+                      <TableCell>$59.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        75
+                      </TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        2024-01-01 12:00 AM
+                      </TableCell>
+                      <TableCell>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger as-child>
+                            <Button
+                              aria-haspopup="true"
+                              size="icon"
+                              variant="ghost"
+                            >
+                              <MoreHorizontal class="h-4 w-4" />
+                              <span class="sr-only">Toggle menu</span>
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                            <DropdownMenuItem>Edit</DropdownMenuItem>
+                            <DropdownMenuItem>Delete</DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                    <TableRow>
+                      <TableCell class="hidden sm:table-cell">
+                        <img
+                          alt="Product image"
+                          class="aspect-square rounded-md object-cover"
+                          height="64"
+                          src="/placeholder.svg"
+                          width="64"
+                        >
+                      </TableCell>
+                      <TableCell class="font-medium">
+                        Luminous VR Headset
+                      </TableCell>
+                      <TableCell>
+                        <Badge variant="outline">
+                          Active
+                        </Badge>
+                      </TableCell>
+                      <TableCell>$199.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        30
+                      </TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        2024-02-14 02:14 PM
+                      </TableCell>
+                      <TableCell>
+                        <DropdownMenu>
+                          <DropdownMenuTrigger as-child>
+                            <Button
+                              aria-haspopup="true"
+                              size="icon"
+                              variant="ghost"
+                            >
+                              <MoreHorizontal class="h-4 w-4" />
+                              <span class="sr-only">Toggle menu</span>
+                            </Button>
+                          </DropdownMenuTrigger>
+                          <DropdownMenuContent align="end">
+                            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                            <DropdownMenuItem>Edit</DropdownMenuItem>
+                            <DropdownMenuItem>Delete</DropdownMenuItem>
+                          </DropdownMenuContent>
+                        </DropdownMenu>
+                      </TableCell>
+                    </TableRow>
+                  </TableBody>
+                </Table>
+              </CardContent>
+              <CardFooter>
+                <div class="text-xs text-muted-foreground">
+                  Showing <strong>1-10</strong> of <strong>32</strong>
+                  products
+                </div>
+              </CardFooter>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </main>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard07.vue b/apps/www/src/lib/registry/new-york/block/Dashboard07.vue
new file mode 100644
index 00000000..4ed80695
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard07.vue
@@ -0,0 +1,629 @@
+<script lang="ts">
+export const description = 'A product details page.'
+export const iframeHeight = '780px'
+export const containerClass = 'w-full h-full'
+</script>
+
+<script setup lang="ts">
+import {
+  ChevronLeft,
+  CircleUser,
+  Home,
+  LineChart,
+  Package,
+  Package2,
+  PanelLeft,
+  PlusCircle,
+  Search,
+  Settings,
+  ShoppingCart,
+  Upload,
+  Users2,
+} from 'lucide-vue-next'
+
+import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/lib/registry/new-york/ui/breadcrumb'
+import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/lib/registry/new-york/ui/table'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/new-york/ui/select'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/lib/registry/new-york/ui/tooltip'
+</script>
+
+<template>
+  <div class="flex min-h-screen w-full flex-col bg-muted/40">
+    <aside class="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex">
+      <nav class="flex flex-col items-center gap-4 px-2 sm:py-5">
+        <a
+          href="#"
+          class="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base"
+        >
+          <Package2 class="h-4 w-4 transition-all group-hover:scale-110" />
+          <span class="sr-only">Acme Inc</span>
+        </a>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Home class="h-5 w-5" />
+              <span class="sr-only">Dashboard</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Dashboard
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <ShoppingCart class="h-5 w-5" />
+              <span class="sr-only">Orders</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Orders
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Package class="h-5 w-5" />
+              <span class="sr-only">Products</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Products
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Users2 class="h-5 w-5" />
+              <span class="sr-only">Customers</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Customers
+          </TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <LineChart class="h-5 w-5" />
+              <span class="sr-only">Analytics</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Analytics
+          </TooltipContent>
+        </Tooltip>
+      </nav>
+      <nav class="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <a
+              href="#"
+              class="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8"
+            >
+              <Settings class="h-5 w-5" />
+              <span class="sr-only">Settings</span>
+            </a>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            Settings
+          </TooltipContent>
+        </Tooltip>
+      </nav>
+    </aside>
+    <div class="flex flex-col sm:gap-4 sm:py-4 sm:pl-14">
+      <header class="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6">
+        <Sheet>
+          <SheetTrigger as-child>
+            <Button size="icon" variant="outline" class="sm:hidden">
+              <PanelLeft class="h-5 w-5" />
+              <span class="sr-only">Toggle Menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" class="sm:max-w-xs">
+            <nav class="grid gap-6 text-lg font-medium">
+              <a
+                href="#"
+                class="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
+              >
+                <Package2 class="h-5 w-5 transition-all group-hover:scale-110" />
+                <span class="sr-only">Acme Inc</span>
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <Home class="h-5 w-5" />
+                Dashboard
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <ShoppingCart class="h-5 w-5" />
+                Orders
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-foreground"
+              >
+                <Package class="h-5 w-5" />
+                Products
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <Users2 class="h-5 w-5" />
+                Customers
+              </a>
+              <a
+                href="#"
+                class="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
+              >
+                <LineChart class="h-5 w-5" />
+                Settings
+              </a>
+            </nav>
+          </SheetContent>
+        </Sheet>
+        <Breadcrumb class="hidden md:flex">
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink as-child>
+                <a href="#">Dashboard</a>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink as-child>
+                <a href="#">Products</a>
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Edit Product</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <div class="relative ml-auto flex-1 md:grow-0">
+          <Search class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="Search..."
+            class="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]"
+          />
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="secondary" size="icon" class="rounded-full">
+              <CircleUser class="h-5 w-5" />
+              <span class="sr-only">Toggle user menu</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Settings</DropdownMenuItem>
+            <DropdownMenuItem>Support</DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>Logout</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </header>
+      <main class="grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8">
+        <div class="mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4">
+          <div class="flex items-center gap-4">
+            <Button variant="outline" size="icon" class="h-7 w-7">
+              <ChevronLeft class="h-4 w-4" />
+              <span class="sr-only">Back</span>
+            </Button>
+            <h1 class="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">
+              Pro Controller
+            </h1>
+            <Badge variant="outline" class="ml-auto sm:ml-0">
+              In stock
+            </Badge>
+            <div class="hidden items-center gap-2 md:ml-auto md:flex">
+              <Button variant="outline" size="sm">
+                Discard
+              </Button>
+              <Button size="sm">
+                Save Product
+              </Button>
+            </div>
+          </div>
+          <div class="grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8">
+            <div class="grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Product Details</CardTitle>
+                  <CardDescription>
+                    Lipsum dolor sit amet, consectetur adipiscing elit
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div class="grid gap-6">
+                    <div class="grid gap-3">
+                      <Label for="name">Name</Label>
+                      <Input
+                        id="name"
+                        type="text"
+                        class="w-full"
+                        default-value="Gamer Gear Pro Controller"
+                      />
+                    </div>
+                    <div class="grid gap-3">
+                      <Label for="description">Description</Label>
+                      <Textarea
+                        id="description"
+                        default-value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
+                        class="min-h-32"
+                      />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader>
+                  <CardTitle>Stock</CardTitle>
+                  <CardDescription>
+                    Lipsum dolor sit amet, consectetur adipiscing elit
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead class="w-[100px]">
+                          SKU
+                        </TableHead>
+                        <TableHead>Stock</TableHead>
+                        <TableHead>Price</TableHead>
+                        <TableHead class="w-[100px]">
+                          Size
+                        </TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      <TableRow>
+                        <TableCell class="font-semibold">
+                          GGPC-001
+                        </TableCell>
+                        <TableCell>
+                          <Label for="stock-1" class="sr-only">
+                            Stock
+                          </Label>
+                          <Input
+                            id="stock-1"
+                            type="number"
+                            default-value="100"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Label for="price-1" class="sr-only">
+                            Price
+                          </Label>
+                          <Input
+                            id="price-1"
+                            type="number"
+                            default-value="99.99"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <ToggleGroup
+                            type="single"
+                            default-value="s"
+                            variant="outline"
+                          >
+                            <ToggleGroupItem value="s">
+                              S
+                            </ToggleGroupItem>
+                            <ToggleGroupItem value="m">
+                              M
+                            </ToggleGroupItem>
+                            <ToggleGroupItem value="l">
+                              L
+                            </ToggleGroupItem>
+                          </ToggleGroup>
+                        </TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell class="font-semibold">
+                          GGPC-002
+                        </TableCell>
+                        <TableCell>
+                          <Label for="stock-2" class="sr-only">
+                            Stock
+                          </Label>
+                          <Input
+                            id="stock-2"
+                            type="number"
+                            default-value="143"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Label for="price-2" class="sr-only">
+                            Price
+                          </Label>
+                          <Input
+                            id="price-2"
+                            type="number"
+                            default-value="99.99"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <ToggleGroup
+                            type="single"
+                            default-value="m"
+                            variant="outline"
+                          >
+                            <ToggleGroupItem value="s">
+                              S
+                            </ToggleGroupItem>
+                            <ToggleGroupItem value="m">
+                              M
+                            </ToggleGroupItem>
+                            <ToggleGroupItem value="l">
+                              L
+                            </ToggleGroupItem>
+                          </ToggleGroup>
+                        </TableCell>
+                      </TableRow>
+                      <TableRow>
+                        <TableCell class="font-semibold">
+                          GGPC-003
+                        </TableCell>
+                        <TableCell>
+                          <Label for="stock-3" class="sr-only">
+                            Stock
+                          </Label>
+                          <Input
+                            id="stock-3"
+                            type="number"
+                            default-value="32"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <Label for="price-3" class="sr-only">
+                            Stock
+                          </Label>
+                          <Input
+                            id="price-3"
+                            type="number"
+                            default-value="99.99"
+                          />
+                        </TableCell>
+                        <TableCell>
+                          <ToggleGroup
+                            type="single"
+                            default-value="s"
+                            variant="outline"
+                          >
+                            <ToggleGroupItem value="s">
+                              S
+                            </ToggleGroupItem>
+                            <ToggleGroupItem value="m">
+                              M
+                            </ToggleGroupItem>
+                            <ToggleGroupItem value="l">
+                              L
+                            </ToggleGroupItem>
+                          </ToggleGroup>
+                        </TableCell>
+                      </TableRow>
+                    </TableBody>
+                  </Table>
+                </CardContent>
+                <CardFooter class="justify-center border-t p-4">
+                  <Button size="sm" variant="ghost" class="gap-1">
+                    <PlusCircle class="h-3.5 w-3.5" />
+                    Add Variant
+                  </Button>
+                </CardFooter>
+              </Card>
+              <Card>
+                <CardHeader>
+                  <CardTitle>Product Category</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div class="grid gap-6 sm:grid-cols-3">
+                    <div class="grid gap-3">
+                      <Label for="category">Category</Label>
+                      <Select>
+                        <SelectTrigger
+                          id="category"
+                          aria-label="Select category"
+                        >
+                          <SelectValue placeholder="Select category" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="clothing">
+                            Clothing
+                          </SelectItem>
+                          <SelectItem value="electronics">
+                            Electronics
+                          </SelectItem>
+                          <SelectItem value="accessories">
+                            Accessories
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div class="grid gap-3">
+                      <Label for="subcategory">
+                        Subcategory (optional)
+                      </Label>
+                      <Select>
+                        <SelectTrigger
+                          id="subcategory"
+                          aria-label="Select subcategory"
+                        >
+                          <SelectValue placeholder="Select subcategory" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="t-shirts">
+                            T-Shirts
+                          </SelectItem>
+                          <SelectItem value="hoodies">
+                            Hoodies
+                          </SelectItem>
+                          <SelectItem value="sweatshirts">
+                            Sweatshirts
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+            <div class="grid auto-rows-max items-start gap-4 lg:gap-8">
+              <Card>
+                <CardHeader>
+                  <CardTitle>Product Status</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div class="grid gap-6">
+                    <div class="grid gap-3">
+                      <Label for="status">Status</Label>
+                      <Select>
+                        <SelectTrigger id="status" aria-label="Select status">
+                          <SelectValue placeholder="Select status" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="draft">
+                            Draft
+                          </SelectItem>
+                          <SelectItem value="published">
+                            Active
+                          </SelectItem>
+                          <SelectItem value="archived">
+                            Archived
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+              <Card class="overflow-hidden">
+                <CardHeader>
+                  <CardTitle>Product imgs</CardTitle>
+                  <CardDescription>
+                    Lipsum dolor sit amet, consectetur adipiscing elit
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div class="grid gap-2">
+                    <img
+                      alt="Product image"
+                      class="aspect-square w-full rounded-md object-cover"
+                      height="300"
+                      src="/placeholder.svg"
+                      width="300"
+                    >
+                    <div class="grid grid-cols-3 gap-2">
+                      <button>
+                        <img
+                          alt="Product image"
+                          class="aspect-square w-full rounded-md object-cover"
+                          height="84"
+                          src="/placeholder.svg"
+                          width="84"
+                        >
+                      </button>
+                      <button>
+                        <img
+                          alt="Product image"
+                          class="aspect-square w-full rounded-md object-cover"
+                          height="84"
+                          src="/placeholder.svg"
+                          width="84"
+                        >
+                      </button>
+                      <button class="flex aspect-square w-full items-center justify-center rounded-md border border-dashed">
+                        <Upload class="h-4 w-4 text-muted-foreground" />
+                        <span class="sr-only">Upload</span>
+                      </button>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+              <Card>
+                <CardHeader>
+                  <CardTitle>Archive Product</CardTitle>
+                  <CardDescription>
+                    Lipsum dolor sit amet, consectetur adipiscing elit.
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div />
+                  <Button size="sm" variant="secondary">
+                    Archive Product
+                  </Button>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+          <div class="flex items-center justify-center gap-2 md:hidden">
+            <Button variant="outline" size="sm">
+              Discard
+            </Button>
+            <Button size="sm">
+              Save Product
+            </Button>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>

From d868c9fd482b67bb97cc2d596ae9f5d465b0b069 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 3 Apr 2024 23:15:20 +0800
Subject: [PATCH 05/10] chore: updates min-size

---
 apps/www/.vitepress/theme/components/BlockPreview.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/.vitepress/theme/components/BlockPreview.vue b/apps/www/.vitepress/theme/components/BlockPreview.vue
index 404847ea..65b33573 100644
--- a/apps/www/.vitepress/theme/components/BlockPreview.vue
+++ b/apps/www/.vitepress/theme/components/BlockPreview.vue
@@ -156,7 +156,7 @@ watch([style, codeConfig], async () => {
               <Tablet class="h-3.5 w-3.5" />
             </ToggleGroupItem>
             <ToggleGroupItem
-              value="25"
+              value="30"
               class="h-[22px] w-[22px] rounded-sm p-0"
             >
               <Smartphone class="h-3.5 w-3.5" />
@@ -219,7 +219,7 @@ watch([style, codeConfig], async () => {
           ref="resizableRef"
           class="relative rounded-lg border bg-background transition-all "
           :default-size="100"
-          :min-size="25"
+          :min-size="30"
         >
           <div v-if="isLoading" class="flex items-center justify-center h-full">
             <Spinner />

From 4f9a5af90785ce7e00eff3a47199a4e24a083a0a Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 3 Apr 2024 23:23:58 +0800
Subject: [PATCH 06/10] chore: update blocks metadata

---
 .../registry/default/block/Dashboard05.vue    | 176 ++++++++++++------
 .../registry/default/block/Dashboard06.vue    |   4 +-
 .../registry/default/block/Dashboard07.vue    |   4 +-
 .../registry/new-york/block/Dashboard05.vue   |   4 +-
 .../registry/new-york/block/Dashboard06.vue   |   4 +-
 .../registry/new-york/block/Dashboard07.vue   |   4 +-
 6 files changed, 134 insertions(+), 62 deletions(-)

diff --git a/apps/www/src/lib/registry/default/block/Dashboard05.vue b/apps/www/src/lib/registry/default/block/Dashboard05.vue
index 73b8e8a8..a68f2a92 100644
--- a/apps/www/src/lib/registry/default/block/Dashboard05.vue
+++ b/apps/www/src/lib/registry/default/block/Dashboard05.vue
@@ -1,11 +1,11 @@
 <script lang="ts">
-export const description = 'A order tracking page. The order page has a sidebar navigation and a main content area.'
-export const iframeHeight = '780px'
+export const description = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'
+export const iframeHeight = '1112px'
 export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { 
+import {
   ChevronLeft,
   ChevronRight,
   CircleUser,
@@ -23,10 +23,10 @@ import {
   Settings,
   ShoppingCart,
   Truck,
-  Users2
+  Users2,
 } from 'lucide-vue-next'
 
-import { Badge } from "@/lib/registry/default/ui/badge"
+import { Badge } from '@/lib/registry/default/ui/badge'
 import { Button } from '@/lib/registry/default/ui/button'
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/lib/registry/default/ui/dropdown-menu'
@@ -38,7 +38,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from "@/lib/registry/default/ui/breadcrumb"
+} from '@/lib/registry/default/ui/breadcrumb'
 import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
 import {
   Pagination,
@@ -49,9 +49,9 @@ import {
   PaginationListItem,
   PaginationNext,
   PaginationPrev,
-} from "@/lib/registry/default/ui/pagination"
-import { Progress } from "@/lib/registry/default/ui/progress"
-import { Separator } from "@/lib/registry/default/ui/separator"
+} from '@/lib/registry/default/ui/pagination'
+import { Progress } from '@/lib/registry/default/ui/progress'
+import { Separator } from '@/lib/registry/default/ui/separator'
 import {
   Table,
   TableBody,
@@ -59,18 +59,18 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/lib/registry/default/ui/table"
+} from '@/lib/registry/default/ui/table'
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-} from "@/lib/registry/default/ui/tabs"
+} from '@/lib/registry/default/ui/tabs'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/lib/registry/default/ui/tooltip"
+} from '@/lib/registry/default/ui/tooltip'
 import { Checkbox } from '@/lib/registry/default/ui/checkbox'
 </script>
 
@@ -95,7 +95,9 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
               <span class="sr-only">Dashboard</span>
             </a>
           </TooltipTrigger>
-          <TooltipContent side="right">Dashboard</TooltipContent>
+          <TooltipContent side="right">
+            Dashboard
+          </TooltipContent>
         </Tooltip>
         <Tooltip>
           <TooltipTrigger as-child>
@@ -107,7 +109,9 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
               <span class="sr-only">Orders</span>
             </a>
           </TooltipTrigger>
-          <TooltipContent side="right">Orders</TooltipContent>
+          <TooltipContent side="right">
+            Orders
+          </TooltipContent>
         </Tooltip>
         <Tooltip>
           <TooltipTrigger as-child>
@@ -119,7 +123,9 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
               <span class="sr-only">Products</span>
             </a>
           </TooltipTrigger>
-          <TooltipContent side="right">Products</TooltipContent>
+          <TooltipContent side="right">
+            Products
+          </TooltipContent>
         </Tooltip>
         <Tooltip>
           <TooltipTrigger as-child>
@@ -131,7 +137,9 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
               <span class="sr-only">Customers</span>
             </a>
           </TooltipTrigger>
-          <TooltipContent side="right">Customers</TooltipContent>
+          <TooltipContent side="right">
+            Customers
+          </TooltipContent>
         </Tooltip>
         <Tooltip>
           <TooltipTrigger as-child>
@@ -143,7 +151,9 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
               <span class="sr-only">Analytics</span>
             </a>
           </TooltipTrigger>
-          <TooltipContent side="right">Analytics</TooltipContent>
+          <TooltipContent side="right">
+            Analytics
+          </TooltipContent>
         </Tooltip>
       </nav>
       <nav class="mt-auto flex flex-col items-center gap-4 px-2 sm:py-5">
@@ -157,7 +167,9 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
               <span class="sr-only">Settings</span>
             </a>
           </TooltipTrigger>
-          <TooltipContent side="right">Settings</TooltipContent>
+          <TooltipContent side="right">
+            Settings
+          </TooltipContent>
         </Tooltip>
       </nav>
     </aside>
@@ -279,7 +291,9 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
             <Card>
               <CardHeader class="pb-2">
                 <CardDescription>This Week</CardDescription>
-                <CardTitle class="text-4xl">$1329</CardTitle>
+                <CardTitle class="text-4xl">
+                  $1329
+                </CardTitle>
               </CardHeader>
               <CardContent>
                 <div class="text-xs text-muted-foreground">
@@ -293,7 +307,9 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
             <Card>
               <CardHeader class="pb-2">
                 <CardDescription>This Month</CardDescription>
-                <CardTitle class="text-3xl">$5,329</CardTitle>
+                <CardTitle class="text-3xl">
+                  $5,329
+                </CardTitle>
               </CardHeader>
               <CardContent>
                 <div class="text-xs text-muted-foreground">
@@ -305,12 +321,18 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
               </CardFooter>
             </Card>
           </div>
-          <Tabs defaultValue="week">
+          <Tabs default-value="week">
             <div class="flex items-center">
               <TabsList>
-                <TabsTrigger value="week">Week</TabsTrigger>
-                <TabsTrigger value="month">Month</TabsTrigger>
-                <TabsTrigger value="year">Year</TabsTrigger>
+                <TabsTrigger value="week">
+                  Week
+                </TabsTrigger>
+                <TabsTrigger value="month">
+                  Month
+                </TabsTrigger>
+                <TabsTrigger value="year">
+                  Year
+                </TabsTrigger>
               </TabsList>
               <div class="ml-auto flex items-center gap-2">
                 <DropdownMenu>
@@ -325,7 +347,7 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
                     <DropdownMenuSeparator />
                     <DropdownMenuItem>
                       <div class="items-top flex space-x-2">
-                        <Checkbox id="terms1"/>
+                        <Checkbox id="terms1" />
                         <label
                           for="terms2"
                           class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -336,7 +358,7 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
                     </DropdownMenuItem>
                     <DropdownMenuItem>
                       <div class="items-top flex space-x-2">
-                        <Checkbox id="terms1"/>
+                        <Checkbox id="terms1" />
                         <label
                           for="terms2"
                           class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -347,7 +369,7 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
                     </DropdownMenuItem>
                     <DropdownMenuItem>
                       <div class="items-top flex space-x-2">
-                        <Checkbox id="terms1"/>
+                        <Checkbox id="terms1" />
                         <label
                           for="terms2"
                           class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
@@ -386,13 +408,17 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
                         <TableHead class="hidden md:table-cell">
                           Date
                         </TableHead>
-                        <TableHead class="text-right">Amount</TableHead>
+                        <TableHead class="text-right">
+                          Amount
+                        </TableHead>
                       </TableRow>
                     </TableHeader>
                     <TableBody>
                       <TableRow class="bg-accent">
                         <TableCell>
-                          <div class="font-medium">Liam Johnson</div>
+                          <div class="font-medium">
+                            Liam Johnson
+                          </div>
                           <div class="hidden text-sm text-muted-foreground md:inline">
                             liam@example.com
                           </div>
@@ -408,11 +434,15 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
                         <TableCell class="hidden md:table-cell">
                           2023-06-23
                         </TableCell>
-                        <TableCell class="text-right">$250.00</TableCell>
+                        <TableCell class="text-right">
+                          $250.00
+                        </TableCell>
                       </TableRow>
                       <TableRow>
                         <TableCell>
-                          <div class="font-medium">Olivia Smith</div>
+                          <div class="font-medium">
+                            Olivia Smith
+                          </div>
                           <div class="hidden text-sm text-muted-foreground md:inline">
                             olivia@example.com
                           </div>
@@ -428,11 +458,15 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
                         <TableCell class="hidden md:table-cell">
                           2023-06-24
                         </TableCell>
-                        <TableCell class="text-right">$150.00</TableCell>
+                        <TableCell class="text-right">
+                          $150.00
+                        </TableCell>
                       </TableRow>
                       <TableRow>
                         <TableCell>
-                          <div class="font-medium">Noah Williams</div>
+                          <div class="font-medium">
+                            Noah Williams
+                          </div>
                           <div class="hidden text-sm text-muted-foreground md:inline">
                             noah@example.com
                           </div>
@@ -448,11 +482,15 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
                         <TableCell class="hidden md:table-cell">
                           2023-06-25
                         </TableCell>
-                        <TableCell class="text-right">$350.00</TableCell>
+                        <TableCell class="text-right">
+                          $350.00
+                        </TableCell>
                       </TableRow>
                       <TableRow>
                         <TableCell>
-                          <div class="font-medium">Emma Brown</div>
+                          <div class="font-medium">
+                            Emma Brown
+                          </div>
                           <div class="hidden text-sm text-muted-foreground md:inline">
                             emma@example.com
                           </div>
@@ -468,11 +506,15 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
                         <TableCell class="hidden md:table-cell">
                           2023-06-26
                         </TableCell>
-                        <TableCell class="text-right">$450.00</TableCell>
+                        <TableCell class="text-right">
+                          $450.00
+                        </TableCell>
                       </TableRow>
                       <TableRow>
                         <TableCell>
-                          <div class="font-medium">Liam Johnson</div>
+                          <div class="font-medium">
+                            Liam Johnson
+                          </div>
                           <div class="hidden text-sm text-muted-foreground md:inline">
                             liam@example.com
                           </div>
@@ -488,11 +530,15 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
                         <TableCell class="hidden md:table-cell">
                           2023-06-23
                         </TableCell>
-                        <TableCell class="text-right">$250.00</TableCell>
+                        <TableCell class="text-right">
+                          $250.00
+                        </TableCell>
                       </TableRow>
                       <TableRow>
                         <TableCell>
-                          <div class="font-medium">Liam Johnson</div>
+                          <div class="font-medium">
+                            Liam Johnson
+                          </div>
                           <div class="hidden text-sm text-muted-foreground md:inline">
                             liam@example.com
                           </div>
@@ -508,11 +554,15 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
                         <TableCell class="hidden md:table-cell">
                           2023-06-23
                         </TableCell>
-                        <TableCell class="text-right">$250.00</TableCell>
+                        <TableCell class="text-right">
+                          $250.00
+                        </TableCell>
                       </TableRow>
                       <TableRow>
                         <TableCell>
-                          <div class="font-medium">Olivia Smith</div>
+                          <div class="font-medium">
+                            Olivia Smith
+                          </div>
                           <div class="hidden text-sm text-muted-foreground md:inline">
                             olivia@example.com
                           </div>
@@ -528,11 +578,15 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
                         <TableCell class="hidden md:table-cell">
                           2023-06-24
                         </TableCell>
-                        <TableCell class="text-right">$150.00</TableCell>
+                        <TableCell class="text-right">
+                          $150.00
+                        </TableCell>
                       </TableRow>
                       <TableRow>
                         <TableCell>
-                          <div class="font-medium">Emma Brown</div>
+                          <div class="font-medium">
+                            Emma Brown
+                          </div>
                           <div class="hidden text-sm text-muted-foreground md:inline">
                             emma@example.com
                           </div>
@@ -548,7 +602,9 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
                         <TableCell class="hidden md:table-cell">
                           2023-06-26
                         </TableCell>
-                        <TableCell class="text-right">$450.00</TableCell>
+                        <TableCell class="text-right">
+                          $450.00
+                        </TableCell>
                       </TableRow>
                     </TableBody>
                   </Table>
@@ -599,7 +655,9 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
             </CardHeader>
             <CardContent class="p-6 text-sm">
               <div class="grid gap-3">
-                <div class="font-semibold">Order Details</div>
+                <div class="font-semibold">
+                  Order Details
+                </div>
                 <ul class="grid gap-3">
                   <li class="flex items-center justify-between">
                     <span class="text-muted-foreground">
@@ -637,7 +695,9 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
               <Separator class="my-4" />
               <div class="grid grid-cols-2 gap-4">
                 <div class="grid gap-3">
-                  <div class="font-semibold">Shipping Information</div>
+                  <div class="font-semibold">
+                    Shipping Information
+                  </div>
                   <address class="grid gap-0.5 not-italic text-muted-foreground">
                     <span>Liam Johnson</span>
                     <span>1234 Main St.</span>
@@ -645,7 +705,9 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
                   </address>
                 </div>
                 <div class="grid auto-rows-max gap-3">
-                  <div class="font-semibold">Billing Information</div>
+                  <div class="font-semibold">
+                    Billing Information
+                  </div>
                   <div class="text-muted-foreground">
                     Same as shipping address
                   </div>
@@ -653,20 +715,28 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
               </div>
               <Separator class="my-4" />
               <div class="grid gap-3">
-                <div class="font-semibold">Customer Information</div>
+                <div class="font-semibold">
+                  Customer Information
+                </div>
                 <dl class="grid gap-3">
                   <div class="flex items-center justify-between">
-                    <dt class="text-muted-foreground">Customer</dt>
+                    <dt class="text-muted-foreground">
+                      Customer
+                    </dt>
                     <dd>Liam Johnson</dd>
                   </div>
                   <div class="flex items-center justify-between">
-                    <dt class="text-muted-foreground">Email</dt>
+                    <dt class="text-muted-foreground">
+                      Email
+                    </dt>
                     <dd>
                       <a href="mailto:">liam@acme.com</a>
                     </dd>
                   </div>
                   <div class="flex items-center justify-between">
-                    <dt class="text-muted-foreground">Phone</dt>
+                    <dt class="text-muted-foreground">
+                      Phone
+                    </dt>
                     <dd>
                       <a href="tel:">+1 234 567 890</a>
                     </dd>
@@ -675,7 +745,9 @@ import { Checkbox } from '@/lib/registry/default/ui/checkbox'
               </div>
               <Separator class="my-4" />
               <div class="grid gap-3">
-                <div class="font-semibold">Payment Information</div>
+                <div class="font-semibold">
+                  Payment Information
+                </div>
                 <dl class="grid gap-3">
                   <div class="flex items-center justify-between">
                     <dt class="flex items-center gap-1 text-muted-foreground">
diff --git a/apps/www/src/lib/registry/default/block/Dashboard06.vue b/apps/www/src/lib/registry/default/block/Dashboard06.vue
index 010fb60c..8e90136c 100644
--- a/apps/www/src/lib/registry/default/block/Dashboard06.vue
+++ b/apps/www/src/lib/registry/default/block/Dashboard06.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-export const description = 'A products page.'
-export const iframeHeight = '780px'
+export const description = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'
+export const iframeHeight = '938px'
 export const containerClass = 'w-full h-full'
 </script>
 
diff --git a/apps/www/src/lib/registry/default/block/Dashboard07.vue b/apps/www/src/lib/registry/default/block/Dashboard07.vue
index 1b01e5aa..5ee3afa9 100644
--- a/apps/www/src/lib/registry/default/block/Dashboard07.vue
+++ b/apps/www/src/lib/registry/default/block/Dashboard07.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-export const description = 'A product details page.'
-export const iframeHeight = '780px'
+export const description = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'
+export const iframeHeight = '1200px'
 export const containerClass = 'w-full h-full'
 </script>
 
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard05.vue b/apps/www/src/lib/registry/new-york/block/Dashboard05.vue
index 91c2ab31..0fcddcba 100644
--- a/apps/www/src/lib/registry/new-york/block/Dashboard05.vue
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard05.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-export const description = 'A order tracking page. The order page has a sidebar navigation and a main content area.'
-export const iframeHeight = '780px'
+export const description = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'
+export const iframeHeight = '1112px'
 export const containerClass = 'w-full h-full'
 </script>
 
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard06.vue b/apps/www/src/lib/registry/new-york/block/Dashboard06.vue
index 66458fb8..d6608c5f 100644
--- a/apps/www/src/lib/registry/new-york/block/Dashboard06.vue
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard06.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-export const description = 'A products page.'
-export const iframeHeight = '780px'
+export const description = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'
+export const iframeHeight = '938px'
 export const containerClass = 'w-full h-full'
 </script>
 
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard07.vue b/apps/www/src/lib/registry/new-york/block/Dashboard07.vue
index 4ed80695..56ad2623 100644
--- a/apps/www/src/lib/registry/new-york/block/Dashboard07.vue
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard07.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
-export const description = 'A product details page.'
-export const iframeHeight = '780px'
+export const description = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'
+export const iframeHeight = '1200px'
 export const containerClass = 'w-full h-full'
 </script>
 

From 3e2e4ec5a324b5bd532726bfc5c9e813c750a9bd Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 3 Apr 2024 23:33:34 +0800
Subject: [PATCH 07/10] chore: fix column not hidden

---
 apps/www/src/lib/registry/default/block/Dashboard06.vue  | 4 +++-
 apps/www/src/lib/registry/new-york/block/Dashboard06.vue | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/www/src/lib/registry/default/block/Dashboard06.vue b/apps/www/src/lib/registry/default/block/Dashboard06.vue
index 8e90136c..b62753b7 100644
--- a/apps/www/src/lib/registry/default/block/Dashboard06.vue
+++ b/apps/www/src/lib/registry/default/block/Dashboard06.vue
@@ -326,7 +326,9 @@ import {
                       </TableHead>
                       <TableHead>Name</TableHead>
                       <TableHead>Status</TableHead>
-                      <TableHead>Price</TableHead>
+                      <TableHead class="hidden md:table-cell">
+                        Price
+                      </TableHead>
                       <TableHead class="hidden md:table-cell">
                         Total Sales
                       </TableHead>
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard06.vue b/apps/www/src/lib/registry/new-york/block/Dashboard06.vue
index d6608c5f..2442117c 100644
--- a/apps/www/src/lib/registry/new-york/block/Dashboard06.vue
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard06.vue
@@ -326,7 +326,9 @@ import {
                       </TableHead>
                       <TableHead>Name</TableHead>
                       <TableHead>Status</TableHead>
-                      <TableHead>Price</TableHead>
+                      <TableHead class="hidden md:table-cell">
+                        Price
+                      </TableHead>
                       <TableHead class="hidden md:table-cell">
                         Total Sales
                       </TableHead>

From 0c3c703cb0a338e372e04a78ece1cc9675c2288f Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Wed, 3 Apr 2024 23:46:49 +0800
Subject: [PATCH 08/10] chore: fix column not hidden

---
 .../registry/default/block/Dashboard06.vue    | 24 ++++++++++++++-----
 .../registry/new-york/block/Dashboard06.vue   | 24 ++++++++++++++-----
 2 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/apps/www/src/lib/registry/default/block/Dashboard06.vue b/apps/www/src/lib/registry/default/block/Dashboard06.vue
index b62753b7..dad34329 100644
--- a/apps/www/src/lib/registry/default/block/Dashboard06.vue
+++ b/apps/www/src/lib/registry/default/block/Dashboard06.vue
@@ -359,7 +359,9 @@ import {
                           Draft
                         </Badge>
                       </TableCell>
-                      <TableCell>$499.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        $499.99
+                      </TableCell>
                       <TableCell class="hidden md:table-cell">
                         25
                       </TableCell>
@@ -404,7 +406,9 @@ import {
                           Active
                         </Badge>
                       </TableCell>
-                      <TableCell>$129.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        $129.99
+                      </TableCell>
                       <TableCell class="hidden md:table-cell">
                         100
                       </TableCell>
@@ -449,7 +453,9 @@ import {
                           Active
                         </Badge>
                       </TableCell>
-                      <TableCell>$39.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        $39.99
+                      </TableCell>
                       <TableCell class="hidden md:table-cell">
                         50
                       </TableCell>
@@ -494,7 +500,9 @@ import {
                           Draft
                         </Badge>
                       </TableCell>
-                      <TableCell>$2.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        $2.99
+                      </TableCell>
                       <TableCell class="hidden md:table-cell">
                         0
                       </TableCell>
@@ -539,7 +547,9 @@ import {
                           Active
                         </Badge>
                       </TableCell>
-                      <TableCell>$59.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        $59.99
+                      </TableCell>
                       <TableCell class="hidden md:table-cell">
                         75
                       </TableCell>
@@ -584,7 +594,9 @@ import {
                           Active
                         </Badge>
                       </TableCell>
-                      <TableCell>$199.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        $199.99
+                      </TableCell>
                       <TableCell class="hidden md:table-cell">
                         30
                       </TableCell>
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard06.vue b/apps/www/src/lib/registry/new-york/block/Dashboard06.vue
index 2442117c..9f370213 100644
--- a/apps/www/src/lib/registry/new-york/block/Dashboard06.vue
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard06.vue
@@ -359,7 +359,9 @@ import {
                           Draft
                         </Badge>
                       </TableCell>
-                      <TableCell>$499.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        $499.99
+                      </TableCell>
                       <TableCell class="hidden md:table-cell">
                         25
                       </TableCell>
@@ -404,7 +406,9 @@ import {
                           Active
                         </Badge>
                       </TableCell>
-                      <TableCell>$129.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        $129.99
+                      </TableCell>
                       <TableCell class="hidden md:table-cell">
                         100
                       </TableCell>
@@ -449,7 +453,9 @@ import {
                           Active
                         </Badge>
                       </TableCell>
-                      <TableCell>$39.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        $39.99
+                      </TableCell>
                       <TableCell class="hidden md:table-cell">
                         50
                       </TableCell>
@@ -494,7 +500,9 @@ import {
                           Draft
                         </Badge>
                       </TableCell>
-                      <TableCell>$2.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        $2.99
+                      </TableCell>
                       <TableCell class="hidden md:table-cell">
                         0
                       </TableCell>
@@ -539,7 +547,9 @@ import {
                           Active
                         </Badge>
                       </TableCell>
-                      <TableCell>$59.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        $59.99
+                      </TableCell>
                       <TableCell class="hidden md:table-cell">
                         75
                       </TableCell>
@@ -584,7 +594,9 @@ import {
                           Active
                         </Badge>
                       </TableCell>
-                      <TableCell>$199.99</TableCell>
+                      <TableCell class="hidden md:table-cell">
+                        $199.99
+                      </TableCell>
                       <TableCell class="hidden md:table-cell">
                         30
                       </TableCell>

From cb955c82a7c93b4c606817ec7d80c1a79054539f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kristian=20Fr=C3=B8lund?= <kristian@froelund.net>
Date: Thu, 4 Apr 2024 10:37:18 +0200
Subject: [PATCH 09/10] fix: add type button to v-calendar navigations to
 prevent form submission (#461)

---
 apps/www/src/lib/registry/default/ui/calendar/Calendar.vue  | 4 ++--
 apps/www/src/lib/registry/new-york/ui/calendar/Calendar.vue | 4 ++--
 apps/www/src/public/registry/styles/default/calendar.json   | 2 +-
 apps/www/src/public/registry/styles/new-york/calendar.json  | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
index b8c60f3d..381c2713 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
@@ -79,10 +79,10 @@ const vCalendarSlots = computed(() => {
 <template>
   <div class="relative">
     <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
+      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" type="button" @click="handleNav('prev')">
         <ChevronLeft class="w-4 h-4" />
       </button>
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
+      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" type="button" @click="handleNav('next')">
         <ChevronRight class="w-4 h-4" />
       </button>
     </div>
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 deba4ac8..0fe6e4d5 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
@@ -80,10 +80,10 @@ const vCalendarSlots = computed(() => {
 <template>
   <div class="relative">
     <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
+      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" type="button" @click="handleNav('prev')">
         <ChevronLeftIcon class="w-4 h-4" />
       </button>
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
+      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" type="button" @click="handleNav('next')">
         <ChevronRightIcon class="w-4 h-4" />
       </button>
     </div>
diff --git a/apps/www/src/public/registry/styles/default/calendar.json b/apps/www/src/public/registry/styles/default/calendar.json
index 06799304..b77470ee 100644
--- a/apps/www/src/public/registry/styles/default/calendar.json
+++ b/apps/www/src/public/registry/styles/default/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\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/default/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})\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        <ChevronLeft 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        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\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\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\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\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\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\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\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\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 { ChevronLeft, ChevronRight } from 'lucide-vue-next'\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/default/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})\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')\" type=\"button\" @click=\"handleNav('prev')\">\n        <ChevronLeft 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')\" type=\"button\" @click=\"handleNav('next')\">\n        <ChevronRight class=\"w-4 h-4\" />\n      </button>\n    </div>\n\n    <DatePicker\n      ref=\"datePicker\"\n      v-bind=\"$attrs\"\n      v-model=\"modelValue\"\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\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\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\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\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\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\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\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",
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 1ef57616..1296c153 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        <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"
+      "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')\" type=\"button\" @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')\" type=\"button\" @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",

From 8aa0e2a41df9a252151a9f481da93840def4b487 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Thu, 4 Apr 2024 17:21:19 +0800
Subject: [PATCH 10/10] chore: bump radix-vue

---
 apps/www/package.json     |  2 +-
 packages/cli/package.json |  2 +-
 pnpm-lock.yaml            | 36 +++++++++++++++++++++++++++---------
 3 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/apps/www/package.json b/apps/www/package.json
index 47bfee65..39a33ced 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -32,7 +32,7 @@
     "embla-carousel-vue": "^8.0.0",
     "lucide-vue-next": "^0.359.0",
     "magic-string": "^0.30.8",
-    "radix-vue": "^1.5.3",
+    "radix-vue": "^1.6.2",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
     "vaul-vue": "^0.1.0",
diff --git a/packages/cli/package.json b/packages/cli/package.json
index ecf7e7be..22074f67 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -62,7 +62,7 @@
     "ora": "^8.0.1",
     "pathe": "^1.1.2",
     "prompts": "^2.4.2",
-    "radix-vue": "^1.5.3",
+    "radix-vue": "^1.6.2",
     "ts-morph": "^22.0.0",
     "tsconfig-paths": "^4.2.0",
     "zod": "^3.22.4"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d67f56fc..096d1a2e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,8 +93,8 @@ importers:
         specifier: ^0.30.8
         version: 0.30.8
       radix-vue:
-        specifier: ^1.5.3
-        version: 1.5.3(vue@3.4.21)
+        specifier: ^1.6.2
+        version: 1.6.2(vue@3.4.21)
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.1)
@@ -256,8 +256,8 @@ importers:
         specifier: ^2.4.2
         version: 2.4.2
       radix-vue:
-        specifier: ^1.5.3
-        version: 1.5.3(vue@3.4.21)
+        specifier: ^1.6.2
+        version: 1.6.2(vue@3.4.21)
       ts-morph:
         specifier: ^22.0.0
         version: 22.0.0
@@ -3327,6 +3327,7 @@ packages:
     dependencies:
       is-glob: 4.0.3
       micromatch: 4.0.5
+      napi-wasm: 1.1.0
     dev: true
     bundledDependencies:
       - napi-wasm
@@ -5386,7 +5387,7 @@ packages:
       '@babel/helper-module-imports': 7.22.15
       '@babel/helper-plugin-utils': 7.22.5
       '@babel/parser': 7.24.1
-      '@vue/compiler-sfc': 3.4.21
+      '@vue/compiler-sfc': 3.4.19
     dev: true
 
   /@vue/compiler-core@3.4.19:
@@ -6062,6 +6063,13 @@ packages:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
 
+  /aria-hidden@1.2.4:
+    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+    engines: {node: '>=10'}
+    dependencies:
+      tslib: 2.6.2
+    dev: false
+
   /array-ify@1.0.0:
     resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==}
     dev: true
@@ -10723,6 +10731,10 @@ packages:
     hasBin: true
     dev: false
 
+  /napi-wasm@1.1.0:
+    resolution: {integrity: sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==}
+    dev: true
+
   /natural-compare-lite@1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
     dev: true
@@ -12489,17 +12501,23 @@ packages:
     resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
     dev: false
 
-  /radix-vue@1.5.3(vue@3.4.21):
-    resolution: {integrity: sha512-K1JF8P238jGKRwwlWe0LNCd80bamfWFnDhLNBAgoWvSRORRIsoo7DODnC4TLE62JE55tf/6ABSs5JIvp2BvYPA==}
+  /radix-vue@1.6.2(vue@3.4.21):
+    resolution: {integrity: sha512-uHyj8YaA+O2ZF1Ouxl2EJUzXXEFLzN/CtOE1HVFG3h60aFD7E9HNZ5RxODnXSD7j0vZLFS/dHU9Z2+Yjljj2Lg==}
+    peerDependencies:
+      vue: '>= 3.2.0'
     dependencies:
       '@floating-ui/dom': 1.6.1
       '@floating-ui/vue': 1.0.6(vue@3.4.21)
       '@internationalized/date': 3.5.2
+      '@vueuse/core': 10.9.0(vue@3.4.21)
+      '@vueuse/shared': 10.9.0(vue@3.4.21)
+      aria-hidden: 1.2.4
+      defu: 6.1.4
       fast-deep-equal: 3.1.3
       nanoid: 5.0.6
+      vue: 3.4.21(typescript@5.4.2)
     transitivePeerDependencies:
       - '@vue/composition-api'
-      - vue
     dev: false
 
   /radix3@1.1.1:
@@ -14500,7 +14518,7 @@ packages:
     resolution: {integrity: sha512-3PYWMbN3cSdsciv3fzewskxZFnX61PYq1uNsbvizXDo/8sN4SMrWkYDqWaPdTD3GTEm6wpx7j5flRLg7A5ZXbQ==}
     dependencies:
       '@vueuse/core': 10.9.0(vue@3.4.21)
-      radix-vue: 1.5.3(vue@3.4.21)
+      radix-vue: 1.6.2(vue@3.4.21)
       vue: 3.4.21(typescript@5.4.2)
     transitivePeerDependencies:
       - '@vue/composition-api'