chore(release): version packages (#5733)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

apps/www/__registry__/default/block/_sink/page.tsx

@@ -0,0 +1,273 @@
+import { AccordionDemo } from "@/registry/default/block/_sink/components/accordion-demo"
+import { AlertDemo } from "@/registry/default/block/_sink/components/alert-demo"
+import { AlertDialogDemo } from "@/registry/default/block/_sink/components/alert-dialog-demo"
+import { AppSidebar } from "@/registry/default/block/_sink/components/app-sidebar"
+import { AspectRatioDemo } from "@/registry/default/block/_sink/components/aspect-ratio-demo"
+import { AvatarDemo } from "@/registry/default/block/_sink/components/avatar-demo"
+import { BadgeDemo } from "@/registry/default/block/_sink/components/badge-demo"
+import { BadgeDestructive } from "@/registry/default/block/_sink/components/badge-destructive"
+import { BadgeOutline } from "@/registry/default/block/_sink/components/badge-outline"
+import { BadgeSecondary } from "@/registry/default/block/_sink/components/badge-secondary"
+import { BreadcrumbDemo } from "@/registry/default/block/_sink/components/breadcrumb-demo"
+import { ButtonDemo } from "@/registry/default/block/_sink/components/button-demo"
+import { ButtonDestructive } from "@/registry/default/block/_sink/components/button-destructive"
+import { ButtonGhost } from "@/registry/default/block/_sink/components/button-ghost"
+import { ButtonLink } from "@/registry/default/block/_sink/components/button-link"
+import { ButtonLoading } from "@/registry/default/block/_sink/components/button-loading"
+import { ButtonOutline } from "@/registry/default/block/_sink/components/button-outline"
+import { ButtonSecondary } from "@/registry/default/block/_sink/components/button-secondary"
+import { ButtonWithIcon } from "@/registry/default/block/_sink/components/button-with-icon"
+import { CalendarDemo } from "@/registry/default/block/_sink/components/calendar-demo"
+import { CardDemo } from "@/registry/default/block/_sink/components/card-demo"
+import { CarouselDemo } from "@/registry/default/block/_sink/components/carousel-demo"
+import { CheckboxDemo } from "@/registry/default/block/_sink/components/checkbox-demo"
+import { CollapsibleDemo } from "@/registry/default/block/_sink/components/collapsible-demo"
+import { ComboboxDemo } from "@/registry/default/block/_sink/components/combobox-demo"
+import { CommandDemo } from "@/registry/default/block/_sink/components/command-demo"
+import { ComponentWrapper } from "@/registry/default/block/_sink/components/component-wrapper"
+import { ContextMenuDemo } from "@/registry/default/block/_sink/components/context-menu-demo"
+import { DatePickerDemo } from "@/registry/default/block/_sink/components/date-picker-demo"
+import { DialogDemo } from "@/registry/default/block/_sink/components/dialog-demo"
+import { DrawerDemo } from "@/registry/default/block/_sink/components/drawer-demo"
+import { DropdownMenuDemo } from "@/registry/default/block/_sink/components/dropdown-menu-demo"
+import { HoverCardDemo } from "@/registry/default/block/_sink/components/hover-card-demo"
+import { InputDemo } from "@/registry/default/block/_sink/components/input-demo"
+import { InputOTPDemo } from "@/registry/default/block/_sink/components/input-otp-demo"
+import { LabelDemo } from "@/registry/default/block/_sink/components/label-demo"
+import { MenubarDemo } from "@/registry/default/block/_sink/components/menubar-demo"
+import { NavigationMenuDemo } from "@/registry/default/block/_sink/components/navigation-menu-demo"
+import { PaginationDemo } from "@/registry/default/block/_sink/components/pagination-demo"
+import { PopoverDemo } from "@/registry/default/block/_sink/components/popover-demo"
+import { ProgressDemo } from "@/registry/default/block/_sink/components/progress-demo"
+import { RadioGroupDemo } from "@/registry/default/block/_sink/components/radio-group-demo"
+import { ResizableHandleDemo } from "@/registry/default/block/_sink/components/resizable-handle"
+import { ScrollAreaDemo } from "@/registry/default/block/_sink/components/scroll-area-demo"
+import { SelectDemo } from "@/registry/default/block/_sink/components/select-demo"
+import { SeparatorDemo } from "@/registry/default/block/_sink/components/separator-demo"
+import { SheetDemo } from "@/registry/default/block/_sink/components/sheet-demo"
+import { SkeletonDemo } from "@/registry/default/block/_sink/components/skeleton-demo"
+import { SliderDemo } from "@/registry/default/block/_sink/components/slider-demo"
+import { SonnerDemo } from "@/registry/default/block/_sink/components/sonner-demo"
+import { SwitchDemo } from "@/registry/default/block/_sink/components/switch-demo"
+import { TableDemo } from "@/registry/default/block/_sink/components/table-demo"
+import { TabsDemo } from "@/registry/default/block/_sink/components/tabs-demo"
+import { TextareaDemo } from "@/registry/default/block/_sink/components/textarea-demo"
+import { ToastDemo } from "@/registry/default/block/_sink/components/toast-demo"
+import { ToggleDemo } from "@/registry/default/block/_sink/components/toggle-demo"
+import { ToggleDisabled } from "@/registry/default/block/_sink/components/toggle-disabled"
+import { ToggleGroupDemo } from "@/registry/default/block/_sink/components/toggle-group-demo"
+import { ToggleOutline } from "@/registry/default/block/_sink/components/toggle-outline"
+import { ToggleWithText } from "@/registry/default/block/_sink/components/toggle-with-text"
+import { TooltipDemo } from "@/registry/default/block/_sink/components/tooltip-demo"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/default/ui/breadcrumb"
+import { Separator } from "@/registry/default/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/default/ui/sidebar"
+
+export default function SinkPage() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <ComponentWrapper name="Accordion">
+              <AccordionDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Alert">
+              <AlertDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="AlertDialog">
+              <AlertDialogDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="AspectRatio">
+              <AspectRatioDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Avatar">
+              <AvatarDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Badge">
+              <BadgeDemo />
+              <BadgeDestructive />
+              <BadgeOutline />
+              <BadgeSecondary />
+            </ComponentWrapper>
+            <ComponentWrapper name="Breadcrumb">
+              <BreadcrumbDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Button">
+              <div className="flex items-center gap-2">
+                <ButtonDemo />
+                <ButtonDestructive />
+                <ButtonGhost />
+                <ButtonLink />
+              </div>
+              <div className="flex items-center gap-2">
+                <ButtonLoading />
+                <ButtonOutline />
+                <ButtonSecondary />
+              </div>
+              <div className="flex items-center gap-2">
+                <ButtonWithIcon />
+              </div>
+            </ComponentWrapper>
+            <ComponentWrapper name="Calendar">
+              <CalendarDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Card">
+              <CardDemo className="w-full" />
+            </ComponentWrapper>
+            <ComponentWrapper
+              name="Carousel"
+              className="[&_.max-w-xs]:max-w-[70%]"
+            >
+              <CarouselDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Checkbox">
+              <CheckboxDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Collapsible">
+              <CollapsibleDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Combobox">
+              <ComboboxDemo />
+            </ComponentWrapper>
+            <ComponentWrapper
+              name="Command"
+              className="[&_[cmdk-root]]:md:min-w-max"
+            >
+              <CommandDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="ContextMenu">
+              <ContextMenuDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="DatePicker">
+              <DatePickerDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Dialog">
+              <DialogDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Drawer">
+              <DrawerDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="DropdownMenu">
+              <DropdownMenuDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="HoverCard">
+              <HoverCardDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Input">
+              <InputDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="InputOTP">
+              <InputOTPDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Label">
+              <LabelDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Menubar">
+              <MenubarDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="NavigationMenu" className="col-span-2">
+              <NavigationMenuDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Pagination">
+              <PaginationDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Popover">
+              <PopoverDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Progress">
+              <ProgressDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="RadioGroup">
+              <RadioGroupDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Resizable" className="col-span-2">
+              <ResizableHandleDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="ScrollArea">
+              <ScrollAreaDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Select">
+              <SelectDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Separator">
+              <SeparatorDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Sheet">
+              <SheetDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Skeleton">
+              <SkeletonDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Slider">
+              <SliderDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Sonner">
+              <SonnerDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Switch">
+              <SwitchDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Table" className="col-span-2">
+              <TableDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Tabs">
+              <TabsDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Textarea">
+              <TextareaDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Toast">
+              <ToastDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Toggle">
+              <div className="flex items-center gap-2">
+                <ToggleDemo />
+                <ToggleDisabled />
+                <ToggleOutline />
+                <ToggleWithText />
+              </div>
+            </ComponentWrapper>
+            <ComponentWrapper name="ToggleGroup">
+              <ToggleGroupDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Tooltip">
+              <TooltipDemo />
+            </ComponentWrapper>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}

apps/www/__registry__/icons.tsx

@@ -0,0 +1,451 @@
+// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+import * as React from "react"
+
+export const Icons = {
+  AlertCircle: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.AlertCircle,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ExclamationTriangleIcon,
+      }))
+    ),
+  },
+  ArrowLeft: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.ArrowLeft,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ArrowLeftIcon,
+      }))
+    ),
+  },
+  ArrowRight: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.ArrowRight,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ArrowRightIcon,
+      }))
+    ),
+  },
+  ArrowUpDown: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.ArrowUpDown,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.CaretSortIcon,
+      }))
+    ),
+  },
+  BellRing: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.BellRing,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.BellIcon,
+      }))
+    ),
+  },
+  Bold: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Bold,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.FontBoldIcon,
+      }))
+    ),
+  },
+  Calculator: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Calculator,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ComponentPlaceholderIcon,
+      }))
+    ),
+  },
+  Calendar: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Calendar,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.CalendarIcon,
+      }))
+    ),
+  },
+  Check: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Check,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.CheckIcon,
+      }))
+    ),
+  },
+  ChevronDown: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.ChevronDown,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ChevronDownIcon,
+      }))
+    ),
+  },
+  ChevronLeft: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.ChevronLeft,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ChevronLeftIcon,
+      }))
+    ),
+  },
+  ChevronRight: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.ChevronRight,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ChevronRightIcon,
+      }))
+    ),
+  },
+  ChevronUp: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.ChevronUp,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ChevronUpIcon,
+      }))
+    ),
+  },
+  ChevronsUpDown: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.ChevronsUpDown,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.CaretSortIcon,
+      }))
+    ),
+  },
+  Circle: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Circle,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.DotFilledIcon,
+      }))
+    ),
+  },
+  Copy: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Copy,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.CopyIcon,
+      }))
+    ),
+  },
+  CreditCard: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.CreditCard,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ComponentPlaceholderIcon,
+      }))
+    ),
+  },
+  GripVertical: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.GripVertical,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.DragHandleDots2Icon,
+      }))
+    ),
+  },
+  Italic: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Italic,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.FontItalicIcon,
+      }))
+    ),
+  },
+  Loader2: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Loader2,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ReloadIcon,
+      }))
+    ),
+  },
+  Mail: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Mail,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.EnvelopeClosedIcon,
+      }))
+    ),
+  },
+  MailOpen: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.MailOpen,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.EnvelopeOpenIcon,
+      }))
+    ),
+  },
+  Minus: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Minus,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.MinusIcon,
+      }))
+    ),
+  },
+  Moon: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Moon,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.MoonIcon,
+      }))
+    ),
+  },
+  MoreHorizontal: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.MoreHorizontal,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.DotsHorizontalIcon,
+      }))
+    ),
+  },
+  PanelLeft: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.PanelLeft,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.ViewVerticalIcon,
+      }))
+    ),
+  },
+  Plus: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Plus,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.PlusIcon,
+      }))
+    ),
+  },
+  Search: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Search,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.MagnifyingGlassIcon,
+      }))
+    ),
+  },
+  Send: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Send,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.PaperPlaneIcon,
+      }))
+    ),
+  },
+  Settings: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Settings,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.GearIcon,
+      }))
+    ),
+  },
+  Slash: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Slash,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.SlashIcon,
+      }))
+    ),
+  },
+  Smile: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Smile,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.FaceIcon,
+      }))
+    ),
+  },
+  Sun: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Sun,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.SunIcon,
+      }))
+    ),
+  },
+  Terminal: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Terminal,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.RocketIcon,
+      }))
+    ),
+  },
+  Underline: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.Underline,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.UnderlineIcon,
+      }))
+    ),
+  },
+  User: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.User,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.PersonIcon,
+      }))
+    ),
+  },
+  X: {
+    lucide: React.lazy(() =>
+      import("lucide-react").then((mod) => ({
+        default: mod.X,
+      }))
+    ),
+    radix: React.lazy(() =>
+      import("@radix-ui/react-icons").then((mod) => ({
+        default: mod.Cross2Icon,
+      }))
+    ),
+  },
+}

apps/www/__registry__/index.tsx

@@ -2501,6 +2501,18 @@ export const Index: Record<string, any> = {
       subcategory: "",
       chunks: []
     },
+    "_sink": {
+      name: "_sink",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["accordion","alert","alert-dialog","aspect-ratio","avatar","badge","breadcrumb","button","calendar","card","carousel","chart","checkbox","collapsible","command","context-menu","dialog","drawer","dropdown-menu","hover-card","input","input-otp","label","menubar","navigation-menu","pagination","popover","progress","radio-group","resizable","scroll-area","select","separator","sheet","sidebar","skeleton","slider","sonner","switch","table","tabs","textarea","toast","toggle","toggle-group","tooltip"],
+      files: ["registry/new-york/block/_sink/page.tsx","registry/new-york/block/_sink/components/app-sidebar.tsx","registry/new-york/block/_sink/components/component-wrapper.tsx","registry/new-york/block/_sink/components/nav-main.tsx","registry/new-york/block/_sink/components/nav-projects.tsx","registry/new-york/block/_sink/components/nav-user.tsx","registry/new-york/block/_sink/components/team-switcher.tsx","registry/new-york/block/_sink/components/accordion-demo.tsx","registry/new-york/block/_sink/components/alert-demo.tsx","registry/new-york/block/_sink/components/alert-dialog-demo.tsx","registry/new-york/block/_sink/components/aspect-ratio-demo.tsx","registry/new-york/block/_sink/components/avatar-demo.tsx","registry/new-york/block/_sink/components/badge-demo.tsx","registry/new-york/block/_sink/components/breadcrumb-demo.tsx","registry/new-york/block/_sink/components/button-demo.tsx","registry/new-york/block/_sink/components/calendar-demo.tsx","registry/new-york/block/_sink/components/card-demo.tsx","registry/new-york/block/_sink/components/carousel-demo.tsx","registry/new-york/block/_sink/components/checkbox-demo.tsx","registry/new-york/block/_sink/components/collapsible-demo.tsx","registry/new-york/block/_sink/components/combobox-demo.tsx","registry/new-york/block/_sink/components/command-demo.tsx","registry/new-york/block/_sink/components/context-menu-demo.tsx","registry/new-york/block/_sink/components/date-picker-demo.tsx","registry/new-york/block/_sink/components/dialog-demo.tsx","registry/new-york/block/_sink/components/drawer-demo.tsx","registry/new-york/block/_sink/components/dropdown-menu-demo.tsx","registry/new-york/block/_sink/components/hover-card-demo.tsx","registry/new-york/block/_sink/components/input-demo.tsx","registry/new-york/block/_sink/components/input-otp-demo.tsx","registry/new-york/block/_sink/components/label-demo.tsx","registry/new-york/block/_sink/components/menubar-demo.tsx","registry/new-york/block/_sink/components/navigation-menu-demo.tsx","registry/new-york/block/_sink/components/pagination-demo.tsx","registry/new-york/block/_sink/components/popover-demo.tsx","registry/new-york/block/_sink/components/progress-demo.tsx","registry/new-york/block/_sink/components/radio-group-demo.tsx","registry/new-york/block/_sink/components/resizable-handle.tsx","registry/new-york/block/_sink/components/scroll-area-demo.tsx","registry/new-york/block/_sink/components/select-demo.tsx","registry/new-york/block/_sink/components/separator-demo.tsx","registry/new-york/block/_sink/components/sheet-demo.tsx","registry/new-york/block/_sink/components/skeleton-demo.tsx","registry/new-york/block/_sink/components/slider-demo.tsx","registry/new-york/block/_sink/components/sonner-demo.tsx","registry/new-york/block/_sink/components/switch-demo.tsx","registry/new-york/block/_sink/components/table-demo.tsx","registry/new-york/block/_sink/components/tabs-demo.tsx","registry/new-york/block/_sink/components/textarea-demo.tsx","registry/new-york/block/_sink/components/toast-demo.tsx","registry/new-york/block/_sink/components/toggle-demo.tsx","registry/new-york/block/_sink/components/toggle-group-demo.tsx","registry/new-york/block/_sink/components/tooltip-demo.tsx","registry/new-york/block/_sink/components/badge-destructive.tsx","registry/new-york/block/_sink/components/badge-outline.tsx","registry/new-york/block/_sink/components/badge-secondary.tsx","registry/new-york/block/_sink/components/button-destructive.tsx","registry/new-york/block/_sink/components/button-ghost.tsx","registry/new-york/block/_sink/components/button-link.tsx","registry/new-york/block/_sink/components/button-loading.tsx","registry/new-york/block/_sink/components/button-outline.tsx","registry/new-york/block/_sink/components/button-secondary.tsx","registry/new-york/block/_sink/components/button-with-icon.tsx","registry/new-york/block/_sink/components/toggle-disabled.tsx","registry/new-york/block/_sink/components/toggle-outline.tsx","registry/new-york/block/_sink/components/toggle-with-text.tsx"],
+      component: React.lazy(() => import("@/registry/new-york/block/_sink/page.tsx")),
+      source: "__registry__/new-york/block/_sink/page.tsx",
+      category: "",
+      subcategory: "",
+      chunks: []
+    },
     "sidebar-01": {
       name: "sidebar-01",
       description: "A simple sidebar with navigation grouped by section.",
@@ -6258,6 +6270,18 @@ export const Index: Record<string, any> = {
       subcategory: "",
       chunks: []
     },
+    "_sink": {
+      name: "_sink",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["accordion","alert","alert-dialog","aspect-ratio","avatar","badge","breadcrumb","button","calendar","card","carousel","chart","checkbox","collapsible","command","context-menu","dialog","drawer","dropdown-menu","hover-card","input","input-otp","label","menubar","navigation-menu","pagination","popover","progress","radio-group","resizable","scroll-area","select","separator","sheet","sidebar","skeleton","slider","sonner","switch","table","tabs","textarea","toast","toggle","toggle-group","tooltip"],
+      files: ["registry/default/block/_sink/page.tsx","registry/default/block/_sink/components/app-sidebar.tsx","registry/default/block/_sink/components/component-wrapper.tsx","registry/default/block/_sink/components/nav-main.tsx","registry/default/block/_sink/components/nav-projects.tsx","registry/default/block/_sink/components/nav-user.tsx","registry/default/block/_sink/components/team-switcher.tsx","registry/default/block/_sink/components/accordion-demo.tsx","registry/default/block/_sink/components/alert-demo.tsx","registry/default/block/_sink/components/alert-dialog-demo.tsx","registry/default/block/_sink/components/aspect-ratio-demo.tsx","registry/default/block/_sink/components/avatar-demo.tsx","registry/default/block/_sink/components/badge-demo.tsx","registry/default/block/_sink/components/breadcrumb-demo.tsx","registry/default/block/_sink/components/button-demo.tsx","registry/default/block/_sink/components/calendar-demo.tsx","registry/default/block/_sink/components/card-demo.tsx","registry/default/block/_sink/components/carousel-demo.tsx","registry/default/block/_sink/components/checkbox-demo.tsx","registry/default/block/_sink/components/collapsible-demo.tsx","registry/default/block/_sink/components/combobox-demo.tsx","registry/default/block/_sink/components/command-demo.tsx","registry/default/block/_sink/components/context-menu-demo.tsx","registry/default/block/_sink/components/date-picker-demo.tsx","registry/default/block/_sink/components/dialog-demo.tsx","registry/default/block/_sink/components/drawer-demo.tsx","registry/default/block/_sink/components/dropdown-menu-demo.tsx","registry/default/block/_sink/components/hover-card-demo.tsx","registry/default/block/_sink/components/input-demo.tsx","registry/default/block/_sink/components/input-otp-demo.tsx","registry/default/block/_sink/components/label-demo.tsx","registry/default/block/_sink/components/menubar-demo.tsx","registry/default/block/_sink/components/navigation-menu-demo.tsx","registry/default/block/_sink/components/pagination-demo.tsx","registry/default/block/_sink/components/popover-demo.tsx","registry/default/block/_sink/components/progress-demo.tsx","registry/default/block/_sink/components/radio-group-demo.tsx","registry/default/block/_sink/components/resizable-handle.tsx","registry/default/block/_sink/components/scroll-area-demo.tsx","registry/default/block/_sink/components/select-demo.tsx","registry/default/block/_sink/components/separator-demo.tsx","registry/default/block/_sink/components/sheet-demo.tsx","registry/default/block/_sink/components/skeleton-demo.tsx","registry/default/block/_sink/components/slider-demo.tsx","registry/default/block/_sink/components/sonner-demo.tsx","registry/default/block/_sink/components/switch-demo.tsx","registry/default/block/_sink/components/table-demo.tsx","registry/default/block/_sink/components/tabs-demo.tsx","registry/default/block/_sink/components/textarea-demo.tsx","registry/default/block/_sink/components/toast-demo.tsx","registry/default/block/_sink/components/toggle-demo.tsx","registry/default/block/_sink/components/toggle-group-demo.tsx","registry/default/block/_sink/components/tooltip-demo.tsx","registry/default/block/_sink/components/badge-destructive.tsx","registry/default/block/_sink/components/badge-outline.tsx","registry/default/block/_sink/components/badge-secondary.tsx","registry/default/block/_sink/components/button-destructive.tsx","registry/default/block/_sink/components/button-ghost.tsx","registry/default/block/_sink/components/button-link.tsx","registry/default/block/_sink/components/button-loading.tsx","registry/default/block/_sink/components/button-outline.tsx","registry/default/block/_sink/components/button-secondary.tsx","registry/default/block/_sink/components/button-with-icon.tsx","registry/default/block/_sink/components/toggle-disabled.tsx","registry/default/block/_sink/components/toggle-outline.tsx","registry/default/block/_sink/components/toggle-with-text.tsx"],
+      component: React.lazy(() => import("@/registry/default/block/_sink/page.tsx")),
+      source: "__registry__/default/block/_sink/page.tsx",
+      category: "",
+      subcategory: "",
+      chunks: []
+    },
     "sidebar-01": {
       name: "sidebar-01",
       description: "A simple sidebar with navigation grouped by section.",

apps/www/__registry__/new-york/block/_sink/page.tsx

@@ -0,0 +1,273 @@
+import { AccordionDemo } from "@/registry/new-york/block/_sink/components/accordion-demo"
+import { AlertDemo } from "@/registry/new-york/block/_sink/components/alert-demo"
+import { AlertDialogDemo } from "@/registry/new-york/block/_sink/components/alert-dialog-demo"
+import { AppSidebar } from "@/registry/new-york/block/_sink/components/app-sidebar"
+import { AspectRatioDemo } from "@/registry/new-york/block/_sink/components/aspect-ratio-demo"
+import { AvatarDemo } from "@/registry/new-york/block/_sink/components/avatar-demo"
+import { BadgeDemo } from "@/registry/new-york/block/_sink/components/badge-demo"
+import { BadgeDestructive } from "@/registry/new-york/block/_sink/components/badge-destructive"
+import { BadgeOutline } from "@/registry/new-york/block/_sink/components/badge-outline"
+import { BadgeSecondary } from "@/registry/new-york/block/_sink/components/badge-secondary"
+import { BreadcrumbDemo } from "@/registry/new-york/block/_sink/components/breadcrumb-demo"
+import { ButtonDemo } from "@/registry/new-york/block/_sink/components/button-demo"
+import { ButtonDestructive } from "@/registry/new-york/block/_sink/components/button-destructive"
+import { ButtonGhost } from "@/registry/new-york/block/_sink/components/button-ghost"
+import { ButtonLink } from "@/registry/new-york/block/_sink/components/button-link"
+import { ButtonLoading } from "@/registry/new-york/block/_sink/components/button-loading"
+import { ButtonOutline } from "@/registry/new-york/block/_sink/components/button-outline"
+import { ButtonSecondary } from "@/registry/new-york/block/_sink/components/button-secondary"
+import { ButtonWithIcon } from "@/registry/new-york/block/_sink/components/button-with-icon"
+import { CalendarDemo } from "@/registry/new-york/block/_sink/components/calendar-demo"
+import { CardDemo } from "@/registry/new-york/block/_sink/components/card-demo"
+import { CarouselDemo } from "@/registry/new-york/block/_sink/components/carousel-demo"
+import { CheckboxDemo } from "@/registry/new-york/block/_sink/components/checkbox-demo"
+import { CollapsibleDemo } from "@/registry/new-york/block/_sink/components/collapsible-demo"
+import { ComboboxDemo } from "@/registry/new-york/block/_sink/components/combobox-demo"
+import { CommandDemo } from "@/registry/new-york/block/_sink/components/command-demo"
+import { ComponentWrapper } from "@/registry/new-york/block/_sink/components/component-wrapper"
+import { ContextMenuDemo } from "@/registry/new-york/block/_sink/components/context-menu-demo"
+import { DatePickerDemo } from "@/registry/new-york/block/_sink/components/date-picker-demo"
+import { DialogDemo } from "@/registry/new-york/block/_sink/components/dialog-demo"
+import { DrawerDemo } from "@/registry/new-york/block/_sink/components/drawer-demo"
+import { DropdownMenuDemo } from "@/registry/new-york/block/_sink/components/dropdown-menu-demo"
+import { HoverCardDemo } from "@/registry/new-york/block/_sink/components/hover-card-demo"
+import { InputDemo } from "@/registry/new-york/block/_sink/components/input-demo"
+import { InputOTPDemo } from "@/registry/new-york/block/_sink/components/input-otp-demo"
+import { LabelDemo } from "@/registry/new-york/block/_sink/components/label-demo"
+import { MenubarDemo } from "@/registry/new-york/block/_sink/components/menubar-demo"
+import { NavigationMenuDemo } from "@/registry/new-york/block/_sink/components/navigation-menu-demo"
+import { PaginationDemo } from "@/registry/new-york/block/_sink/components/pagination-demo"
+import { PopoverDemo } from "@/registry/new-york/block/_sink/components/popover-demo"
+import { ProgressDemo } from "@/registry/new-york/block/_sink/components/progress-demo"
+import { RadioGroupDemo } from "@/registry/new-york/block/_sink/components/radio-group-demo"
+import { ResizableHandleDemo } from "@/registry/new-york/block/_sink/components/resizable-handle"
+import { ScrollAreaDemo } from "@/registry/new-york/block/_sink/components/scroll-area-demo"
+import { SelectDemo } from "@/registry/new-york/block/_sink/components/select-demo"
+import { SeparatorDemo } from "@/registry/new-york/block/_sink/components/separator-demo"
+import { SheetDemo } from "@/registry/new-york/block/_sink/components/sheet-demo"
+import { SkeletonDemo } from "@/registry/new-york/block/_sink/components/skeleton-demo"
+import { SliderDemo } from "@/registry/new-york/block/_sink/components/slider-demo"
+import { SonnerDemo } from "@/registry/new-york/block/_sink/components/sonner-demo"
+import { SwitchDemo } from "@/registry/new-york/block/_sink/components/switch-demo"
+import { TableDemo } from "@/registry/new-york/block/_sink/components/table-demo"
+import { TabsDemo } from "@/registry/new-york/block/_sink/components/tabs-demo"
+import { TextareaDemo } from "@/registry/new-york/block/_sink/components/textarea-demo"
+import { ToastDemo } from "@/registry/new-york/block/_sink/components/toast-demo"
+import { ToggleDemo } from "@/registry/new-york/block/_sink/components/toggle-demo"
+import { ToggleDisabled } from "@/registry/new-york/block/_sink/components/toggle-disabled"
+import { ToggleGroupDemo } from "@/registry/new-york/block/_sink/components/toggle-group-demo"
+import { ToggleOutline } from "@/registry/new-york/block/_sink/components/toggle-outline"
+import { ToggleWithText } from "@/registry/new-york/block/_sink/components/toggle-with-text"
+import { TooltipDemo } from "@/registry/new-york/block/_sink/components/tooltip-demo"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/registry/new-york/ui/breadcrumb"
+import { Separator } from "@/registry/new-york/ui/separator"
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/registry/new-york/ui/sidebar"
+
+export default function SinkPage() {
+  return (
+    <SidebarProvider>
+      <AppSidebar />
+      <SidebarInset>
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+          <div className="flex items-center gap-2 px-4">
+            <SidebarTrigger className="-ml-1" />
+            <Separator orientation="vertical" className="mr-2 h-4" />
+            <Breadcrumb>
+              <BreadcrumbList>
+                <BreadcrumbItem className="hidden md:block">
+                  <BreadcrumbLink href="#">
+                    Building Your Application
+                  </BreadcrumbLink>
+                </BreadcrumbItem>
+                <BreadcrumbSeparator className="hidden md:block" />
+                <BreadcrumbItem>
+                  <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+                </BreadcrumbItem>
+              </BreadcrumbList>
+            </Breadcrumb>
+          </div>
+        </header>
+        <div className="flex flex-1 flex-col gap-4 p-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+            <ComponentWrapper name="Accordion">
+              <AccordionDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Alert">
+              <AlertDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="AlertDialog">
+              <AlertDialogDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="AspectRatio">
+              <AspectRatioDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Avatar">
+              <AvatarDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Badge">
+              <BadgeDemo />
+              <BadgeDestructive />
+              <BadgeOutline />
+              <BadgeSecondary />
+            </ComponentWrapper>
+            <ComponentWrapper name="Breadcrumb">
+              <BreadcrumbDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Button">
+              <div className="flex items-center gap-2">
+                <ButtonDemo />
+                <ButtonDestructive />
+                <ButtonGhost />
+                <ButtonLink />
+              </div>
+              <div className="flex items-center gap-2">
+                <ButtonLoading />
+                <ButtonOutline />
+                <ButtonSecondary />
+              </div>
+              <div className="flex items-center gap-2">
+                <ButtonWithIcon />
+              </div>
+            </ComponentWrapper>
+            <ComponentWrapper name="Calendar">
+              <CalendarDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Card">
+              <CardDemo className="w-full" />
+            </ComponentWrapper>
+            <ComponentWrapper
+              name="Carousel"
+              className="[&_.max-w-xs]:max-w-[70%]"
+            >
+              <CarouselDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Checkbox">
+              <CheckboxDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Collapsible">
+              <CollapsibleDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Combobox">
+              <ComboboxDemo />
+            </ComponentWrapper>
+            <ComponentWrapper
+              name="Command"
+              className="[&_[cmdk-root]]:md:min-w-max"
+            >
+              <CommandDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="ContextMenu">
+              <ContextMenuDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="DatePicker">
+              <DatePickerDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Dialog">
+              <DialogDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Drawer">
+              <DrawerDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="DropdownMenu">
+              <DropdownMenuDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="HoverCard">
+              <HoverCardDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Input">
+              <InputDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="InputOTP">
+              <InputOTPDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Label">
+              <LabelDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Menubar">
+              <MenubarDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="NavigationMenu" className="col-span-2">
+              <NavigationMenuDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Pagination">
+              <PaginationDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Popover">
+              <PopoverDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Progress">
+              <ProgressDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="RadioGroup">
+              <RadioGroupDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Resizable" className="col-span-2">
+              <ResizableHandleDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="ScrollArea">
+              <ScrollAreaDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Select">
+              <SelectDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Separator">
+              <SeparatorDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Sheet">
+              <SheetDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Skeleton">
+              <SkeletonDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Slider">
+              <SliderDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Sonner">
+              <SonnerDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Switch">
+              <SwitchDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Table" className="col-span-2">
+              <TableDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Tabs">
+              <TabsDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Textarea">
+              <TextareaDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Toast">
+              <ToastDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Toggle">
+              <div className="flex items-center gap-2">
+                <ToggleDemo />
+                <ToggleDisabled />
+                <ToggleOutline />
+                <ToggleWithText />
+              </div>
+            </ComponentWrapper>
+            <ComponentWrapper name="ToggleGroup">
+              <ToggleGroupDemo />
+            </ComponentWrapper>
+            <ComponentWrapper name="Tooltip">
+              <TooltipDemo />
+            </ComponentWrapper>
+          </div>
+        </div>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}

apps/www/app/(app)/colors/layout.tsx

@@ -15,7 +15,7 @@ export const metadata: Metadata = {
   description: "All colors in all formats.",
 }
 
-export default function ChartsLayout({
+export default function ColorsLayout({
   children,
 }: {
   children: React.ReactNode
@@ -37,7 +37,7 @@ export default function ChartsLayout({
           </Button>
         </PageActions>
       </PageHeader>
-      <section id="charts" className="scroll-mt-20">
+      <section id="colors" className="scroll-mt-20">
         {children}
       </section>
     </div>

apps/www/app/(app)/docs/[[...slug]]/page.tsx

@@ -4,7 +4,7 @@ import { allDocs } from "contentlayer/generated"
 import "@/styles/mdx.css"
 import type { Metadata } from "next"
 import Link from "next/link"
-import { ChevronRightIcon, ExternalLinkIcon } from "@radix-ui/react-icons"
+import { ChevronRight, ExternalLink } from "lucide-react"
 import Balancer from "react-wrap-balancer"
 
 import { siteConfig } from "@/config/site"
@@ -89,10 +89,10 @@ export default async function DocPage({ params }: DocPageProps) {
 
   return (
     <main className="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
-      <div className="mx-auto w-full min-w-0">
+      <div className="mx-auto w-full min-w-0 max-w-3xl">
         <div className="mb-4 flex items-center space-x-1 text-sm leading-none text-muted-foreground">
           <div className="truncate">Docs</div>
-          <ChevronRightIcon className="h-3.5 w-3.5" />
+          <ChevronRight className="h-3.5 w-3.5" />
           <div className="text-foreground">{doc.title}</div>
         </div>
         <div className="space-y-2">
@@ -115,7 +115,7 @@ export default async function DocPage({ params }: DocPageProps) {
                 className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
               >
                 Docs
-                <ExternalLinkIcon className="h-3 w-3" />
+                <ExternalLink className="h-3 w-3" />
               </Link>
             )}
             {doc.links?.api && (
@@ -126,7 +126,7 @@ export default async function DocPage({ params }: DocPageProps) {
                 className={cn(badgeVariants({ variant: "secondary" }), "gap-1")}
               >
                 API Reference
-                <ExternalLinkIcon className="h-3 w-3" />
+                <ExternalLink className="h-3 w-3" />
               </Link>
             )}
           </div>
@@ -137,7 +137,7 @@ export default async function DocPage({ params }: DocPageProps) {
         <DocsPager doc={doc} />
       </div>
       <div className="hidden text-sm xl:block">
-        <div className="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] pt-4">
+        <div className="sticky top-20 -mt-6 h-[calc(100vh-3.5rem)] pt-4">
           <ScrollArea className="h-full pb-10">
             {doc.toc && <DashboardTableOfContents toc={toc} />}
             <OpenInV0Cta className="mt-6 max-w-[80%]" />

apps/www/app/(app)/docs/layout.tsx

@@ -8,7 +8,7 @@ interface DocsLayoutProps {
 
 export default function DocsLayout({ children }: DocsLayoutProps) {
   return (
-    <div className="border-b">
+    <div className="border-b border-border/40 dark:border-border">
       <div className="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
         <aside className="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
           <ScrollArea className="h-full py-6 pr-6 lg:py-8">

apps/www/app/(app)/examples/cards/components/github-card.tsx

@@ -1,9 +1,4 @@
-import {
-  ChevronDownIcon,
-  CircleIcon,
-  PlusIcon,
-  StarIcon,
-} from "@radix-ui/react-icons"
+import { ChevronDown, Circle, Plus, Star } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -37,14 +32,14 @@ export function DemoGithub() {
         </div>
         <div className="flex items-center space-x-1 rounded-md bg-secondary text-secondary-foreground">
           <Button variant="secondary" className="px-3 shadow-none">
-            <StarIcon className="mr-2 h-4 w-4" />
+            <Star />
             Star
           </Button>
           <Separator orientation="vertical" className="h-[20px]" />
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="secondary" className="px-2 shadow-none">
-                <ChevronDownIcon className="h-4 w-4 text-secondary-foreground" />
+                <ChevronDown className="text-secondary-foreground" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent
@@ -62,7 +57,7 @@ export function DemoGithub() {
               <DropdownMenuCheckboxItem>Inspiration</DropdownMenuCheckboxItem>
               <DropdownMenuSeparator />
               <DropdownMenuItem>
-                <PlusIcon className="mr-2 h-4 w-4" /> Create List
+                <Plus /> Create List
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -71,11 +66,11 @@ export function DemoGithub() {
       <CardContent>
         <div className="flex space-x-4 text-sm text-muted-foreground">
           <div className="flex items-center">
-            <CircleIcon className="mr-1 h-3 w-3 fill-sky-400 text-sky-400" />
+            <Circle className="mr-1 h-3 w-3 fill-sky-400 text-sky-400" />
             TypeScript
           </div>
           <div className="flex items-center">
-            <StarIcon className="mr-1 h-3 w-3" />
+            <Star className="mr-1 h-3 w-3" />
             20k
           </div>
           <div>Updated April 2023</div>

apps/www/app/(app)/examples/cards/components/notifications.tsx

@@ -1,4 +1,4 @@
-import { BellIcon, EyeNoneIcon, PersonIcon } from "@radix-ui/react-icons"
+import { Bell, EyeOff, User } from "lucide-react"
 
 import {
   Card,
@@ -19,7 +19,7 @@ export function DemoNotifications() {
       </CardHeader>
       <CardContent className="grid gap-1">
         <div className="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
-          <BellIcon className="mt-px h-5 w-5" />
+          <Bell className="mt-px h-5 w-5" />
           <div className="space-y-1">
             <p className="text-sm font-medium leading-none">Everything</p>
             <p className="text-sm text-muted-foreground">
@@ -28,7 +28,7 @@ export function DemoNotifications() {
           </div>
         </div>
         <div className="-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all">
-          <PersonIcon className="mt-px h-5 w-5" />
+          <User className="mt-px h-5 w-5" />
           <div className="space-y-1">
             <p className="text-sm font-medium leading-none">Available</p>
             <p className="text-sm text-muted-foreground">
@@ -37,7 +37,7 @@ export function DemoNotifications() {
           </div>
         </div>
         <div className="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
-          <EyeNoneIcon className="mt-px h-5 w-5" />
+          <EyeOff className="mt-px h-5 w-5" />
           <div className="space-y-1">
             <p className="text-sm font-medium leading-none">Ignoring</p>
             <p className="text-sm text-muted-foreground">

apps/www/app/(app)/examples/cards/components/share-document.tsx

@@ -41,7 +41,7 @@ export function DemoShareDocument() {
         </div>
         <Separator className="my-4" />
         <div className="space-y-4">
-          <h4 className="text-sm font-medium">People with access</h4>
+          <div className="text-sm font-medium">People with access</div>
           <div className="grid gap-6">
             <div className="flex items-center justify-between space-x-4">
               <div className="flex items-center space-x-4">

apps/www/app/(app)/examples/cards/components/team-members.tsx

@@ -1,4 +1,4 @@
-import { ChevronDownIcon } from "@radix-ui/react-icons"
+import { ChevronDown } from "lucide-react"
 
 import {
   Avatar,
@@ -51,8 +51,7 @@ export function DemoTeamMembers() {
           <Popover>
             <PopoverTrigger asChild>
               <Button variant="outline" className="ml-auto">
-                Owner{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
+                Owner <ChevronDown className="text-muted-foreground" />
               </Button>
             </PopoverTrigger>
             <PopoverContent className="p-0" align="end">
@@ -105,8 +104,7 @@ export function DemoTeamMembers() {
           <Popover>
             <PopoverTrigger asChild>
               <Button variant="outline" className="ml-auto">
-                Member{" "}
-                <ChevronDownIcon className="ml-2 h-4 w-4 text-muted-foreground" />
+                Member <ChevronDown className="text-muted-foreground" />
               </Button>
             </PopoverTrigger>
             <PopoverContent className="p-0" align="end">

apps/www/app/(app)/examples/dashboard/components/date-range-picker.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { CalendarIcon } from "@radix-ui/react-icons"
 import { addDays, format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
 import { DateRange } from "react-day-picker"
 
 import { cn } from "@/lib/utils"

apps/www/app/(app)/examples/dashboard/components/team-switcher.tsx

@@ -1,11 +1,7 @@
 "use client"
 
 import * as React from "react"
-import {
-  CaretSortIcon,
-  CheckIcon,
-  PlusCircledIcon,
-} from "@radix-ui/react-icons"
+import { Check, ChevronsUpDown, PlusCircle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import {
@@ -105,7 +101,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
               <AvatarFallback>SC</AvatarFallback>
             </Avatar>
             {selectedTeam.label}
-            <CaretSortIcon className="ml-auto h-4 w-4 shrink-0 opacity-50" />
+            <ChevronsUpDown className="ml-auto opacity-50" />
           </Button>
         </PopoverTrigger>
         <PopoverContent className="w-[200px] p-0">
@@ -133,9 +129,9 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                         <AvatarFallback>SC</AvatarFallback>
                       </Avatar>
                       {team.label}
-                      <CheckIcon
+                      <Check
                         className={cn(
-                          "ml-auto h-4 w-4",
+                          "ml-auto",
                           selectedTeam.value === team.value
                             ? "opacity-100"
                             : "opacity-0"
@@ -156,7 +152,7 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) {
                       setShowNewTeamDialog(true)
                     }}
                   >
-                    <PlusCircledIcon className="mr-2 h-5 w-5" />
+                    <PlusCircle className="h-5 w-5" />
                     Create Team
                   </CommandItem>
                 </DialogTrigger>

apps/www/app/(app)/examples/forms/account/account-form.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { CalendarIcon, CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
 import { format } from "date-fns"
+import { CalendarIcon, Check, ChevronsUpDown } from "lucide-react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
@@ -174,7 +174,7 @@ export function AccountForm() {
                             (language) => language.value === field.value
                           )?.label
                         : "Select language"}
-                      <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      <ChevronsUpDown className="opacity-50" />
                     </Button>
                   </FormControl>
                 </PopoverTrigger>
@@ -192,9 +192,9 @@ export function AccountForm() {
                               form.setValue("language", language.value)
                             }}
                           >
-                            <CheckIcon
+                            <Check
                               className={cn(
-                                "mr-2 h-4 w-4",
+                                "mr-2",
                                 language.value === field.value
                                   ? "opacity-100"
                                   : "opacity-0"

apps/www/app/(app)/examples/forms/appearance/appearance-form.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { zodResolver } from "@hookform/resolvers/zod"
-import { ChevronDownIcon } from "@radix-ui/react-icons"
+import { ChevronDown } from "lucide-react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
@@ -76,7 +76,7 @@ export function AppearanceForm() {
                     <option value="system">System</option>
                   </select>
                 </FormControl>
-                <ChevronDownIcon className="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
+                <ChevronDown className="absolute right-3 top-2.5 h-4 w-4 opacity-50" />
               </div>
               <FormDescription>
                 Set the font you want to use in the dashboard.

apps/www/app/(app)/examples/music/components/album-artwork.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image"
-import { PlusCircledIcon } from "@radix-ui/react-icons"
+import { PlusCircle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import {
@@ -54,7 +54,7 @@ export function AlbumArtwork({
             <ContextMenuSubTrigger>Add to Playlist</ContextMenuSubTrigger>
             <ContextMenuSubContent className="w-48">
               <ContextMenuItem>
-                <PlusCircledIcon className="mr-2 h-4 w-4" />
+                <PlusCircle className="mr-2 h-4 w-4" />
                 New Playlist
               </ContextMenuItem>
               <ContextMenuSeparator />

apps/www/app/(app)/examples/music/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from "next"
 import Image from "next/image"
-import { PlusCircledIcon } from "@radix-ui/react-icons"
+import { PlusCircle } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
@@ -64,7 +64,7 @@ export default function MusicPage() {
                       </TabsList>
                       <div className="ml-auto mr-4">
                         <Button>
-                          <PlusCircledIcon className="mr-2 h-4 w-4" />
+                          <PlusCircle />
                           Add music
                         </Button>
                       </div>

apps/www/app/(app)/examples/playground/components/model-selector.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import * as React from "react"
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
 import { PopoverProps } from "@radix-ui/react-popover"
+import { Check, ChevronsUpDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { useMutationObserver } from "@/hooks/use-mutation-observer"
@@ -64,7 +64,7 @@ export function ModelSelector({ models, types, ...props }: ModelSelectorProps) {
             className="w-full justify-between"
           >
             {selectedModel ? selectedModel.name : "Select a model..."}
-            <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+            <ChevronsUpDown className="opacity-50" />
           </Button>
         </PopoverTrigger>
         <PopoverContent align="end" className="w-[250px] p-0">
@@ -154,11 +154,8 @@ function ModelItem({ model, isSelected, onSelect, onPeek }: ModelItemProps) {
       className="data-[selected=true]:bg-primary data-[selected=true]:text-primary-foreground"
     >
       {model.name}
-      <CheckIcon
-        className={cn(
-          "ml-auto h-4 w-4",
-          isSelected ? "opacity-100" : "opacity-0"
-        )}
+      <Check
+        className={cn("ml-auto", isSelected ? "opacity-100" : "opacity-0")}
       />
     </CommandItem>
   )

apps/www/app/(app)/examples/playground/components/preset-actions.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import { Dialog } from "@radix-ui/react-dialog"
-import { DotsHorizontalIcon } from "@radix-ui/react-icons"
+import { MoreHorizontal } from "lucide-react"
 
 import { toast } from "@/registry/new-york/hooks/use-toast"
 import {
@@ -40,9 +40,9 @@ export function PresetActions() {
     <>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant="secondary">
+          <Button variant="secondary" size="icon">
             <span className="sr-only">Actions</span>
-            <DotsHorizontalIcon className="h-4 w-4" />
+            <MoreHorizontal />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="end">

apps/www/app/(app)/examples/playground/components/preset-selector.tsx

@@ -2,8 +2,8 @@
 
 import * as React from "react"
 import { useRouter } from "next/navigation"
-import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
 import { PopoverProps } from "@radix-ui/react-popover"
+import { Check, ChevronsUpDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york/ui/button"
@@ -43,7 +43,7 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) {
           className="flex-1 justify-between md:max-w-[200px] lg:max-w-[300px]"
         >
           {selectedPreset ? selectedPreset.name : "Load a preset..."}
-          <CaretSortIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          <ChevronsUpDown className="opacity-50" />
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-[300px] p-0">
@@ -61,9 +61,9 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) {
                   }}
                 >
                   {preset.name}
-                  <CheckIcon
+                  <Check
                     className={cn(
-                      "ml-auto h-4 w-4",
+                      "ml-auto",
                       selectedPreset?.id === preset.id
                         ? "opacity-100"
                         : "opacity-0"

apps/www/app/(app)/examples/playground/components/preset-share.tsx

@@ -1,4 +1,4 @@
-import { CopyIcon } from "@radix-ui/react-icons"
+import { Copy } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import { Input } from "@/registry/new-york/ui/input"
@@ -37,7 +37,7 @@ export function PresetShare() {
           </div>
           <Button type="submit" size="sm" className="px-3">
             <span className="sr-only">Copy</span>
-            <CopyIcon className="h-4 w-4" />
+            <Copy />
           </Button>
         </div>
       </PopoverContent>

apps/www/app/(app)/examples/playground/page.tsx

@@ -1,6 +1,6 @@
 import { Metadata } from "next"
 import Image from "next/image"
-import { CounterClockwiseClockIcon } from "@radix-ui/react-icons"
+import { RotateCcw } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -265,7 +265,7 @@ export default function PlaygroundPage() {
                       <Button>Submit</Button>
                       <Button variant="secondary">
                         <span className="sr-only">Show history</span>
-                        <CounterClockwiseClockIcon className="h-4 w-4" />
+                        <RotateCcw />
                       </Button>
                     </div>
                   </div>
@@ -283,7 +283,7 @@ export default function PlaygroundPage() {
                       <Button>Submit</Button>
                       <Button variant="secondary">
                         <span className="sr-only">Show history</span>
-                        <CounterClockwiseClockIcon className="h-4 w-4" />
+                        <RotateCcw />
                       </Button>
                     </div>
                   </div>
@@ -314,7 +314,7 @@ export default function PlaygroundPage() {
                       <Button>Submit</Button>
                       <Button variant="secondary">
                         <span className="sr-only">Show history</span>
-                        <CounterClockwiseClockIcon className="h-4 w-4" />
+                        <RotateCcw />
                       </Button>
                     </div>
                   </div>

apps/www/app/(app)/examples/tasks/components/data-table-column-header.tsx

@@ -1,10 +1,5 @@
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  CaretSortIcon,
-  EyeNoneIcon,
-} from "@radix-ui/react-icons"
 import { Column } from "@tanstack/react-table"
+import { ArrowDown, ArrowUp, ChevronsUpDown, EyeOff } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/registry/new-york/ui/button"
@@ -42,26 +37,26 @@ export function DataTableColumnHeader<TData, TValue>({
           >
             <span>{title}</span>
             {column.getIsSorted() === "desc" ? (
-              <ArrowDownIcon className="ml-2 h-4 w-4" />
+              <ArrowDown />
             ) : column.getIsSorted() === "asc" ? (
-              <ArrowUpIcon className="ml-2 h-4 w-4" />
+              <ArrowUp />
             ) : (
-              <CaretSortIcon className="ml-2 h-4 w-4" />
+              <ChevronsUpDown />
             )}
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
           <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-            <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            <ArrowUp className="h-3.5 w-3.5 text-muted-foreground/70" />
             Asc
           </DropdownMenuItem>
           <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-            <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            <ArrowDown className="h-3.5 w-3.5 text-muted-foreground/70" />
             Desc
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-            <EyeNoneIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            <EyeOff className="h-3.5 w-3.5 text-muted-foreground/70" />
             Hide
           </DropdownMenuItem>
         </DropdownMenuContent>

apps/www/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
-import { CheckIcon, PlusCircledIcon } from "@radix-ui/react-icons"
 import { Column } from "@tanstack/react-table"
+import { Check, PlusCircle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { Badge } from "@/registry/new-york/ui/badge"
@@ -43,7 +43,7 @@ export function DataTableFacetedFilter<TData, TValue>({
     <Popover>
       <PopoverTrigger asChild>
         <Button variant="outline" size="sm" className="h-8 border-dashed">
-          <PlusCircledIcon className="mr-2 h-4 w-4" />
+          <PlusCircle />
           {title}
           {selectedValues?.size > 0 && (
             <>
@@ -111,7 +111,7 @@ export function DataTableFacetedFilter<TData, TValue>({
                           : "opacity-50 [&_svg]:invisible"
                       )}
                     >
-                      <CheckIcon className={cn("h-4 w-4")} />
+                      <Check />
                     </div>
                     {option.icon && (
                       <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />

apps/www/app/(app)/examples/tasks/components/data-table-pagination.tsx

@@ -1,10 +1,10 @@
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  DoubleArrowLeftIcon,
-  DoubleArrowRightIcon,
-} from "@radix-ui/react-icons"
 import { Table } from "@tanstack/react-table"
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -61,7 +61,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to first page</span>
-            <DoubleArrowLeftIcon className="h-4 w-4" />
+            <ChevronsLeft />
           </Button>
           <Button
             variant="outline"
@@ -70,7 +70,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanPreviousPage()}
           >
             <span className="sr-only">Go to previous page</span>
-            <ChevronLeftIcon className="h-4 w-4" />
+            <ChevronLeft />
           </Button>
           <Button
             variant="outline"
@@ -79,7 +79,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to next page</span>
-            <ChevronRightIcon className="h-4 w-4" />
+            <ChevronRight />
           </Button>
           <Button
             variant="outline"
@@ -88,7 +88,7 @@ export function DataTablePagination<TData>({
             disabled={!table.getCanNextPage()}
           >
             <span className="sr-only">Go to last page</span>
-            <DoubleArrowRightIcon className="h-4 w-4" />
+            <ChevronsRight />
           </Button>
         </div>
       </div>

apps/www/app/(app)/examples/tasks/components/data-table-row-actions.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { DotsHorizontalIcon } from "@radix-ui/react-icons"
 import { Row } from "@tanstack/react-table"
+import { MoreHorizontal } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -37,7 +37,7 @@ export function DataTableRowActions<TData>({
           variant="ghost"
           className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
         >
-          <DotsHorizontalIcon className="h-4 w-4" />
+          <MoreHorizontal />
           <span className="sr-only">Open menu</span>
         </Button>
       </DropdownMenuTrigger>

apps/www/app/(app)/examples/tasks/components/data-table-toolbar.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { Cross2Icon } from "@radix-ui/react-icons"
 import { Table } from "@tanstack/react-table"
+import { X } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import { Input } from "@/registry/new-york/ui/input"
@@ -51,7 +51,7 @@ export function DataTableToolbar<TData>({
             className="h-8 px-2 lg:px-3"
           >
             Reset
-            <Cross2Icon className="ml-2 h-4 w-4" />
+            <X />
           </Button>
         )}
       </div>

apps/www/app/(app)/examples/tasks/components/data-table-view-options.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import { DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu"
-import { MixerHorizontalIcon } from "@radix-ui/react-icons"
 import { Table } from "@tanstack/react-table"
+import { Settings2 } from "lucide-react"
 
 import { Button } from "@/registry/new-york/ui/button"
 import {
@@ -28,7 +28,7 @@ export function DataTableViewOptions<TData>({
           size="sm"
           className="ml-auto hidden h-8 lg:flex"
         >
-          <MixerHorizontalIcon className="mr-2 h-4 w-4" />
+          <Settings2 />
           View
         </Button>
       </DropdownMenuTrigger>

apps/www/app/(app)/examples/tasks/data/data.tsx

@@ -1,13 +1,13 @@
 import {
-  ArrowDownIcon,
-  ArrowRightIcon,
-  ArrowUpIcon,
-  CheckCircledIcon,
-  CircleIcon,
-  CrossCircledIcon,
-  QuestionMarkCircledIcon,
-  StopwatchIcon,
-} from "@radix-ui/react-icons"
+  ArrowDown,
+  ArrowRight,
+  ArrowUp,
+  CheckCircle,
+  Circle,
+  CircleOff,
+  HelpCircle,
+  Timer,
+} from "lucide-react"
 
 export const labels = [
   {
@@ -28,27 +28,27 @@ export const statuses = [
   {
     value: "backlog",
     label: "Backlog",
-    icon: QuestionMarkCircledIcon,
+    icon: HelpCircle,
   },
   {
     value: "todo",
     label: "Todo",
-    icon: CircleIcon,
+    icon: Circle,
   },
   {
     value: "in progress",
     label: "In Progress",
-    icon: StopwatchIcon,
+    icon: Timer,
   },
   {
     value: "done",
     label: "Done",
-    icon: CheckCircledIcon,
+    icon: CheckCircle,
   },
   {
     value: "canceled",
     label: "Canceled",
-    icon: CrossCircledIcon,
+    icon: CircleOff,
   },
 ]
 
@@ -56,16 +56,16 @@ export const priorities = [
   {
     label: "Low",
     value: "low",
-    icon: ArrowDownIcon,
+    icon: ArrowDown,
   },
   {
     label: "Medium",
     value: "medium",
-    icon: ArrowRightIcon,
+    icon: ArrowRight,
   },
   {
     label: "High",
     value: "high",
-    icon: ArrowUpIcon,
+    icon: ArrowUp,
   },
 ]

apps/www/app/(app)/layout.tsx

@@ -7,10 +7,10 @@ interface AppLayoutProps {
 
 export default function AppLayout({ children }: AppLayoutProps) {
   return (
-    <>
+    <div className="mx-auto w-full border-border/40 dark:border-border min-[1800px]:max-w-[1536px] min-[1800px]:border-x">
       <SiteHeader />
       <main className="flex-1">{children}</main>
       <SiteFooter />
-    </>
+    </div>
   )
 }

apps/www/app/(app)/page.tsx

@@ -10,8 +10,8 @@ import {
   PageHeaderDescription,
   PageHeaderHeading,
 } from "@/components/page-header"
+import CardsNewYork from "@/registry/new-york/example/cards"
 import { Button } from "@/registry/new-york/ui/button"
-import MailPage from "@/app/(app)/examples/mail/page"
 
 export default function IndexPage() {
   return (
@@ -21,7 +21,7 @@ export default function IndexPage() {
         <PageHeaderHeading>Build your component library</PageHeaderHeading>
         <PageHeaderDescription>
           Beautifully designed components that you can copy and paste into your
-          apps.
+          apps. Made with Tailwind CSS. Open source.
         </PageHeaderDescription>
         <PageActions>
           <Button asChild size="sm">
@@ -41,24 +41,22 @@ export default function IndexPage() {
       <ExamplesNav className="[&>a:first-child]:text-primary" />
       <section className="overflow-hidden rounded-lg border bg-background shadow-md md:hidden md:shadow-xl">
         <Image
-          src="/examples/mail-dark.png"
+          src="/examples/cards-light.png"
           width={1280}
-          height={727}
-          alt="Mail"
-          className="hidden dark:block"
-        />
-        <Image
-          src="/examples/mail-light.png"
-          width={1280}
-          height={727}
-          alt="Mail"
+          height={1214}
+          alt="Cards"
           className="block dark:hidden"
         />
+        <Image
+          src="/examples/cards-dark.png"
+          width={1280}
+          height={1214}
+          alt="Cards"
+          className="hidden dark:block"
+        />
       </section>
-      <section className="hidden md:block">
-        <div className="overflow-hidden rounded-lg border bg-background shadow">
-          <MailPage />
-        </div>
+      <section className="hidden md:block [&>div]:p-0">
+        <CardsNewYork />
       </section>
     </div>
   )

apps/www/app/(app)/sink/layout.tsx

@@ -1,27 +0,0 @@
-import Link from "next/link"
-
-import { ThemeWrapper } from "@/components/theme-wrapper"
-import { styles } from "@/registry/registry-styles"
-
-interface SinkLayoutProps {
-  children: React.ReactNode
-}
-
-export default function SinkLayout({ children }: SinkLayoutProps) {
-  return (
-    <div className="flex flex-col">
-      <div className="container">
-        <div className="flex space-x-2 px-2 py-4">
-          {styles.map((style) => (
-            <Link href={`/sink/${style.name}`} key={style.name}>
-              {style.label}
-            </Link>
-          ))}
-        </div>
-      </div>
-      <div className="flex-1">
-        <ThemeWrapper>{children}</ThemeWrapper>
-      </div>
-    </div>
-  )
-}

apps/www/app/(app)/sink/new-york/page.tsx

@@ -1,206 +0,0 @@
-import * as React from "react"
-import Link from "next/link"
-
-import { cn } from "@/lib/utils"
-import AccordionDemo from "@/registry/new-york/example/accordion-demo"
-import AlertDialogDemo from "@/registry/new-york/example/alert-dialog-demo"
-import AspectRatioDemo from "@/registry/new-york/example/aspect-ratio-demo"
-import AvatarDemo from "@/registry/new-york/example/avatar-demo"
-import BadgeDemo from "@/registry/new-york/example/badge-demo"
-import BadgeDestructive from "@/registry/new-york/example/badge-destructive"
-import BadgeOutline from "@/registry/new-york/example/badge-outline"
-import BadgeSecondary from "@/registry/new-york/example/badge-secondary"
-import ButtonDemo from "@/registry/new-york/example/button-demo"
-import ButtonDestructive from "@/registry/new-york/example/button-destructive"
-import ButtonGhost from "@/registry/new-york/example/button-ghost"
-import ButtonLink from "@/registry/new-york/example/button-link"
-import ButtonLoading from "@/registry/new-york/example/button-loading"
-import ButtonOutline from "@/registry/new-york/example/button-outline"
-import ButtonSecondary from "@/registry/new-york/example/button-secondary"
-import ButtonWithIcon from "@/registry/new-york/example/button-with-icon"
-import CardDemo from "@/registry/new-york/example/card-demo"
-import CheckboxDemo from "@/registry/new-york/example/checkbox-demo"
-import CollapsibleDemo from "@/registry/new-york/example/collapsible-demo"
-import CommandDemo from "@/registry/new-york/example/command-demo"
-import ContextMenuDemo from "@/registry/new-york/example/context-menu-demo"
-import DatePickerDemo from "@/registry/new-york/example/date-picker-demo"
-import DialogDemo from "@/registry/new-york/example/dialog-demo"
-import DropdownMenuDemo from "@/registry/new-york/example/dropdown-menu-demo"
-import HoverCardDemo from "@/registry/new-york/example/hover-card-demo"
-import MenubarDemo from "@/registry/new-york/example/menubar-demo"
-import NavigationMenuDemo from "@/registry/new-york/example/navigation-menu-demo"
-import PopoverDemo from "@/registry/new-york/example/popover-demo"
-import ProgressDemo from "@/registry/new-york/example/progress-demo"
-import RadioGroupDemo from "@/registry/new-york/example/radio-group-demo"
-import ScrollAreaDemo from "@/registry/new-york/example/scroll-area-demo"
-import SelectDemo from "@/registry/new-york/example/select-demo"
-import SeparatorDemo from "@/registry/new-york/example/separator-demo"
-import SheetDemo from "@/registry/new-york/example/sheet-demo"
-import SkeletonDemo from "@/registry/new-york/example/skeleton-demo"
-import SliderDemo from "@/registry/new-york/example/slider-demo"
-import SwitchDemo from "@/registry/new-york/example/switch-demo"
-import TabsDemo from "@/registry/new-york/example/tabs-demo"
-import ToastDemo from "@/registry/new-york/example/toast-demo"
-import ToggleDemo from "@/registry/new-york/example/toggle-demo"
-import ToggleDisabled from "@/registry/new-york/example/toggle-disabled"
-import ToggleOutline from "@/registry/new-york/example/toggle-outline"
-import ToggleWithText from "@/registry/new-york/example/toggle-with-text"
-import TooltipDemo from "@/registry/new-york/example/tooltip-demo"
-import { Button } from "@/registry/new-york/ui/button"
-
-export default function KitchenSinkPage() {
-  return (
-    <div className="container">
-      <div className="grid gap-4">
-        <div className="grid grid-cols-3 items-start gap-4">
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <CardDemo className="w-full" />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SliderDemo className="w-full" />
-            </ComponentWrapper>
-            <ComponentWrapper
-              className="spa flex-col items-start space-x-0
-				space-y-2"
-            >
-              <p className="text-sm text-muted-foreground">Documentation</p>
-              <p className="text-sm font-medium leading-none">
-                You can customize the theme using{" "}
-                <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-foreground">
-                  CSS variables
-                </code>
-                .{" "}
-                <Link
-                  href="#"
-                  className="font-medium text-primary underline underline-offset-4"
-                >
-                  Click here
-                </Link>{" "}
-                to learn more.
-              </p>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <CheckboxDemo />
-              <HoverCardDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>div]:w-full">
-              <TabsDemo />
-            </ComponentWrapper>
-          </div>
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <MenubarDemo />
-              <AvatarDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="flex-col items-start space-x-0 space-y-2">
-              <div className="flex space-x-2">
-                <ButtonDemo />
-                <ButtonSecondary />
-                <ButtonDestructive />
-              </div>
-              <div className="flex space-x-2">
-                <ButtonOutline />
-                <ButtonLink />
-                <ButtonGhost />
-              </div>
-              <div className="flex space-x-2">
-                <ButtonWithIcon />
-                <ButtonLoading />
-              </div>
-              <div className="flex space-x-2">
-                <Button size="lg">Large</Button>
-                <Button size="sm">Small</Button>
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <DatePickerDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <AccordionDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&_ul>li:last-child]:hidden">
-              <NavigationMenuDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="justify-between">
-              <SwitchDemo />
-              <SelectDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SeparatorDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <AspectRatioDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <PopoverDemo />
-              <ToastDemo />
-            </ComponentWrapper>
-          </div>
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <TooltipDemo />
-              <SheetDemo />
-              <ProgressDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <CommandDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>span]:h-[80px] [&>span]:w-[200px]">
-              <RadioGroupDemo />
-              <ContextMenuDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <DropdownMenuDemo />
-                <AlertDialogDemo />
-                <DialogDemo />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <BadgeDemo />
-                <BadgeSecondary />
-                <BadgeDestructive />
-                <BadgeOutline />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SkeletonDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>div]:w-full">
-              <CollapsibleDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <ToggleDemo />
-                <ToggleOutline />
-                <ToggleDisabled />
-                <ToggleWithText />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <ScrollAreaDemo />
-            </ComponentWrapper>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function ComponentWrapper({
-  className,
-  children,
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-between space-x-4 rounded-md p-4",
-        className
-      )}
-    >
-      {children}
-    </div>
-  )
-}

apps/www/app/(app)/sink/page.tsx

@@ -1,210 +0,0 @@
-import * as React from "react"
-import Link from "next/link"
-
-import { cn } from "@/lib/utils"
-import AccordionDemo from "@/registry/default/example/accordion-demo"
-import AlertDialogDemo from "@/registry/default/example/alert-dialog-demo"
-import AspectRatioDemo from "@/registry/default/example/aspect-ratio-demo"
-import AvatarDemo from "@/registry/default/example/avatar-demo"
-import BadgeDemo from "@/registry/default/example/badge-demo"
-import BadgeDestructive from "@/registry/default/example/badge-destructive"
-import BadgeOutline from "@/registry/default/example/badge-outline"
-import BadgeSecondary from "@/registry/default/example/badge-secondary"
-import ButtonDemo from "@/registry/default/example/button-demo"
-import ButtonDestructive from "@/registry/default/example/button-destructive"
-import ButtonGhost from "@/registry/default/example/button-ghost"
-import ButtonLink from "@/registry/default/example/button-link"
-import ButtonLoading from "@/registry/default/example/button-loading"
-import ButtonOutline from "@/registry/default/example/button-outline"
-import ButtonSecondary from "@/registry/default/example/button-secondary"
-import ButtonWithIcon from "@/registry/default/example/button-with-icon"
-import CardDemo from "@/registry/default/example/card-demo"
-import CheckboxDemo from "@/registry/default/example/checkbox-demo"
-import CollapsibleDemo from "@/registry/default/example/collapsible-demo"
-import CommandDemo from "@/registry/default/example/command-demo"
-import ContextMenuDemo from "@/registry/default/example/context-menu-demo"
-import DatePickerDemo from "@/registry/default/example/date-picker-demo"
-import DialogDemo from "@/registry/default/example/dialog-demo"
-import DropdownMenuDemo from "@/registry/default/example/dropdown-menu-demo"
-import HoverCardDemo from "@/registry/default/example/hover-card-demo"
-import MenubarDemo from "@/registry/default/example/menubar-demo"
-import NavigationMenuDemo from "@/registry/default/example/navigation-menu-demo"
-import PopoverDemo from "@/registry/default/example/popover-demo"
-import ProgressDemo from "@/registry/default/example/progress-demo"
-import RadioGroupDemo from "@/registry/default/example/radio-group-demo"
-import ScrollAreaDemo from "@/registry/default/example/scroll-area-demo"
-import SelectDemo from "@/registry/default/example/select-demo"
-import SeparatorDemo from "@/registry/default/example/separator-demo"
-import SheetDemo from "@/registry/default/example/sheet-demo"
-import SkeletonDemo from "@/registry/default/example/skeleton-demo"
-import SliderDemo from "@/registry/default/example/slider-demo"
-import SwitchDemo from "@/registry/default/example/switch-demo"
-import TabsDemo from "@/registry/default/example/tabs-demo"
-import ToastDemo from "@/registry/default/example/toast-demo"
-import ToggleDemo from "@/registry/default/example/toggle-demo"
-import ToggleDisabled from "@/registry/default/example/toggle-disabled"
-import ToggleGroupDemo from "@/registry/default/example/toggle-group-demo"
-import ToggleOutline from "@/registry/default/example/toggle-outline"
-import ToggleWithText from "@/registry/default/example/toggle-with-text"
-import TooltipDemo from "@/registry/default/example/tooltip-demo"
-import { Button } from "@/registry/default/ui/button"
-
-export default function KitchenSinkPage() {
-  return (
-    <div className="container">
-      <div className="grid gap-4">
-        <div className="grid grid-cols-3 items-start gap-4">
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <CardDemo className="w-full" />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SliderDemo className="w-full" />
-            </ComponentWrapper>
-            <ComponentWrapper
-              className="spa flex-col items-start space-x-0
-				space-y-2"
-            >
-              <p className="text-sm text-muted-foreground">Documentation</p>
-              <p className="text-sm font-medium leading-none">
-                You can customize the theme using{" "}
-                <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold text-foreground">
-                  CSS variables
-                </code>
-                .{" "}
-                <Link
-                  href="#"
-                  className="font-medium text-primary underline underline-offset-4"
-                >
-                  Click here
-                </Link>{" "}
-                to learn more.
-              </p>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <CheckboxDemo />
-              <HoverCardDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>div]:w-full">
-              <TabsDemo />
-            </ComponentWrapper>
-          </div>
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <MenubarDemo />
-              <AvatarDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="flex-col items-start space-x-0 space-y-2">
-              <div className="flex space-x-2">
-                <ButtonDemo />
-                <ButtonSecondary />
-                <ButtonDestructive />
-              </div>
-              <div className="flex space-x-2">
-                <ButtonOutline />
-                <ButtonLink />
-                <ButtonGhost />
-              </div>
-              <div className="flex space-x-2">
-                <ButtonWithIcon />
-                <ButtonLoading />
-              </div>
-              <div className="flex space-x-2">
-                <Button size="lg">Large</Button>
-                <Button size="sm">Small</Button>
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <DatePickerDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <AccordionDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&_ul>li:last-child]:hidden">
-              <NavigationMenuDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="justify-between">
-              <SwitchDemo />
-              <SelectDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <ToggleGroupDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SeparatorDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <AspectRatioDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <PopoverDemo />
-              <ToastDemo />
-            </ComponentWrapper>
-          </div>
-          <div className="grid gap-4">
-            <ComponentWrapper>
-              <TooltipDemo />
-              <SheetDemo />
-              <ProgressDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <CommandDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>span]:h-[80px] [&>span]:w-[200px]">
-              <RadioGroupDemo />
-              <ContextMenuDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <DropdownMenuDemo />
-                <AlertDialogDemo />
-                <DialogDemo />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <BadgeDemo />
-                <BadgeSecondary />
-                <BadgeDestructive />
-                <BadgeOutline />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <SkeletonDemo />
-            </ComponentWrapper>
-            <ComponentWrapper className="[&>div]:w-full">
-              <CollapsibleDemo />
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <div className="flex space-x-2">
-                <ToggleDemo />
-                <ToggleOutline />
-                <ToggleDisabled />
-                <ToggleWithText />
-              </div>
-            </ComponentWrapper>
-            <ComponentWrapper>
-              <ScrollAreaDemo />
-            </ComponentWrapper>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function ComponentWrapper({
-  className,
-  children,
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn(
-        "flex items-center justify-between space-x-4 rounded-md p-4",
-        className
-      )}
-    >
-      {children}
-    </div>
-  )
-}

apps/www/app/(internal)/icons/layout.tsx

@@ -0,0 +1,34 @@
+import { Metadata } from "next"
+
+import { Announcement } from "@/components/announcement"
+import {
+  PageHeader,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/page-header"
+
+export const metadata: Metadata = {
+  title: "Icons",
+  description: "All icons in all libraries.",
+}
+
+export default function IconsLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <div className="container relative">
+      <PageHeader>
+        <Announcement />
+        <PageHeaderHeading>Icons</PageHeaderHeading>
+        <PageHeaderDescription>
+          All icons in all libraries.
+        </PageHeaderDescription>
+      </PageHeader>
+      <section id="icons" className="scroll-mt-20">
+        {children}
+      </section>
+    </div>
+  )
+}

apps/www/app/(internal)/icons/page.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import * as React from "react"
+import { Icons } from "@/__registry__/icons"
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/registry/new-york/ui/table"
+import { iconLibraries } from "@/registry/registry-icons"
+
+export default function IconsPage() {
+  return (
+    <div>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[240px]" align="left">
+              name
+            </TableHead>
+            {Object.keys(iconLibraries).map((library) => (
+              <TableHead key={library}>{library}</TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Object.entries(Icons).map(([name, icon]) => (
+            <TableRow key={name}>
+              <TableCell align="left">
+                <code>{name}</code>
+              </TableCell>
+              {Object.entries(iconLibraries).map(([library, name]) => {
+                const IconComponent = icon[library as keyof typeof icon]
+                return (
+                  <TableCell key={library} className="[&_svg]:h-4 [&_svg]:w-4">
+                    <React.Suspense fallback={<div>Loading...</div>}>
+                      {IconComponent && <IconComponent />}
+                    </React.Suspense>
+                  </TableCell>
+                )
+              })}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}

apps/www/app/(internal)/sink/page.tsx

@@ -0,0 +1,3 @@
+import SinkPage from "@/registry/new-york/block/_sink/page"
+
+export default SinkPage

apps/www/components/announcement.tsx

@@ -1,6 +1,5 @@
 import Link from "next/link"
-import { ArrowRightIcon } from "@radix-ui/react-icons"
-import { Blocks, PieChart } from "lucide-react"
+import { ArrowRight, PanelLeft } from "lucide-react"
 
 import { Separator } from "@/registry/new-york/ui/separator"
 
@@ -10,12 +9,12 @@ export function Announcement() {
       href="/docs/components/sidebar"
       className="group inline-flex items-center px-0.5 text-sm font-medium"
     >
-      <PieChart className="h-4 w-4" />{" "}
+      <PanelLeft className="h-4 w-4" />{" "}
       <Separator className="mx-2 h-4" orientation="vertical" />{" "}
       <span className="underline-offset-4 group-hover:underline">
         New sidebar component
       </span>
-      <ArrowRightIcon className="ml-1 h-4 w-4" />
+      <ArrowRight className="ml-1 h-4 w-4" />
     </Link>
   )
 }

apps/www/components/callout.tsx

@@ -1,18 +1,19 @@
+import { cn } from "@/lib/utils"
 import {
   Alert,
   AlertDescription,
   AlertTitle,
 } from "@/registry/new-york/ui/alert"
 
-interface CalloutProps {
-  icon?: string
-  title?: string
-  children?: React.ReactNode
-}
-
-export function Callout({ title, children, icon, ...props }: CalloutProps) {
+export function Callout({
+  title,
+  children,
+  icon,
+  className,
+  ...props
+}: React.ComponentProps<typeof Alert> & { icon?: string }) {
   return (
-    <Alert {...props}>
+    <Alert className={cn("bg-muted/50", className)} {...props}>
       {icon && <span className="mr-4 text-2xl">{icon}</span>}
       {title && <AlertTitle>{title}</AlertTitle>}
       <AlertDescription>{children}</AlertDescription>

apps/www/components/command-menu.tsx

@@ -3,13 +3,7 @@
 import * as React from "react"
 import { useRouter } from "next/navigation"
 import { type DialogProps } from "@radix-ui/react-dialog"
-import {
-  CircleIcon,
-  FileIcon,
-  LaptopIcon,
-  MoonIcon,
-  SunIcon,
-} from "@radix-ui/react-icons"
+import { Circle, File, Laptop, Moon, Sun } from "lucide-react"
 import { useTheme } from "next-themes"
 
 import { docsConfig } from "@/config/docs"
@@ -87,7 +81,7 @@ export function CommandMenu({ ...props }: DialogProps) {
                     runCommand(() => router.push(navItem.href as string))
                   }}
                 >
-                  <FileIcon className="mr-2 h-4 w-4" />
+                  <File />
                   {navItem.title}
                 </CommandItem>
               ))}
@@ -103,7 +97,7 @@ export function CommandMenu({ ...props }: DialogProps) {
                   }}
                 >
                   <div className="mr-2 flex h-4 w-4 items-center justify-center">
-                    <CircleIcon className="h-3 w-3" />
+                    <Circle className="h-3 w-3" />
                   </div>
                   {navItem.title}
                 </CommandItem>
@@ -113,15 +107,15 @@ export function CommandMenu({ ...props }: DialogProps) {
           <CommandSeparator />
           <CommandGroup heading="Theme">
             <CommandItem onSelect={() => runCommand(() => setTheme("light"))}>
-              <SunIcon className="mr-2 h-4 w-4" />
+              <Sun />
               Light
             </CommandItem>
             <CommandItem onSelect={() => runCommand(() => setTheme("dark"))}>
-              <MoonIcon className="mr-2 h-4 w-4" />
+              <Moon />
               Dark
             </CommandItem>
             <CommandItem onSelect={() => runCommand(() => setTheme("system"))}>
-              <LaptopIcon className="mr-2 h-4 w-4" />
+              <Laptop />
               System
             </CommandItem>
           </CommandGroup>

apps/www/components/examples-nav.tsx

@@ -2,12 +2,17 @@
 
 import Link from "next/link"
 import { usePathname } from "next/navigation"
-import { ArrowRightIcon } from "@radix-ui/react-icons"
+import { ArrowRight } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
 
 const examples = [
+  {
+    name: "Examples",
+    href: "/examples/cards",
+    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/mail",
+  },
   {
     name: "Mail",
     href: "/examples/mail",
@@ -18,11 +23,6 @@ const examples = [
     href: "/examples/dashboard",
     code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/dashboard",
   },
-  {
-    name: "Cards",
-    href: "/examples/cards",
-    code: "https://github.com/shadcn/ui/tree/main/apps/www/app/(app)/examples/cards",
-  },
   {
     name: "Tasks",
     href: "/examples/tasks",
@@ -65,8 +65,7 @@ export function ExamplesNav({ className, ...props }: ExamplesNavProps) {
               key={example.href}
               className={cn(
                 "flex h-7 items-center justify-center rounded-full px-4 text-center text-sm transition-colors hover:text-primary",
-                pathname?.startsWith(example.href) ||
-                  (index === 0 && pathname === "/")
+                pathname?.startsWith(example.href)
                   ? "bg-muted font-medium text-primary"
                   : "text-muted-foreground"
               )}
@@ -100,7 +99,7 @@ export function ExampleCodeLink({ pathname }: ExampleCodeLinkProps) {
       className="absolute right-0 top-0 hidden items-center rounded-[0.5rem] text-sm font-medium md:flex"
     >
       View code
-      <ArrowRightIcon className="ml-1 h-4 w-4" />
+      <ArrowRight className="ml-1 h-4 w-4" />
     </Link>
   )
 }

apps/www/components/mdx-components.tsx

@@ -139,10 +139,10 @@ const components = {
     <hr className="my-4 md:my-8" {...props} />
   ),
   table: ({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) => (
-    <div className="my-6 w-full overflow-y-auto rounded-lg">
+    <div className="my-6 w-full overflow-y-auto">
       <table
         className={cn(
-          "relative w-full overflow-hidden text-sm after:absolute after:inset-0 after:rounded-lg after:ring-1 after:ring-border",
+          "relative w-full overflow-hidden border-none text-sm",
           className
         )}
         {...props}
@@ -150,12 +150,15 @@ const components = {
     </div>
   ),
   tr: ({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
-    <tr className={cn("m-0 border-t", className)} {...props} />
+    <tr
+      className={cn("last:border-b-none m-0 border-b", className)}
+      {...props}
+    />
   ),
   th: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
     <th
       className={cn(
-        "border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
+        "px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right",
         className
       )}
       {...props}
@@ -164,7 +167,7 @@ const components = {
   td: ({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) => (
     <td
       className={cn(
-        "border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
+        "px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right",
         className
       )}
       {...props}

apps/www/components/mobile-nav.tsx

@@ -3,7 +3,7 @@
 import * as React from "react"
 import Link, { LinkProps } from "next/link"
 import { useRouter } from "next/navigation"
-import { ViewVerticalIcon } from "@radix-ui/react-icons"
+import { MenuIcon } from "lucide-react"
 
 import { docsConfig } from "@/config/docs"
 import { siteConfig } from "@/config/site"
@@ -21,36 +21,21 @@ export function MobileNav() {
       <SheetTrigger asChild>
         <Button
           variant="ghost"
-          className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
+          className="-ml-2 mr-2 h-8 w-8 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
         >
           <svg
-            strokeWidth="1.5"
-            viewBox="0 0 24 24"
-            fill="none"
             xmlns="http://www.w3.org/2000/svg"
-            className="h-5 w-5"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth="1.5"
+            stroke="currentColor"
+            className="size-6"
           >
             <path
-              d="M3 5H11"
-              stroke="currentColor"
-              strokeWidth="1.5"
               strokeLinecap="round"
               strokeLinejoin="round"
-            ></path>
-            <path
-              d="M3 12H16"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            ></path>
-            <path
-              d="M3 19H21"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            ></path>
+              d="M3.75 9h16.5m-16.5 6.75h16.5"
+            />
           </svg>
           <span className="sr-only">Toggle Menu</span>
         </Button>

apps/www/components/mode-toggle.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { MoonIcon, SunIcon } from "@radix-ui/react-icons"
+import { MoonIcon, SunIcon } from "lucide-react"
 import { useTheme } from "next-themes"
 
 import { Button } from "@/registry/new-york/ui/button"

apps/www/components/pager.tsx

@@ -1,11 +1,10 @@
 import Link from "next/link"
-import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
 import { Doc } from "contentlayer/generated"
+import { ChevronLeft, ChevronRight } from "lucide-react"
 import { NavItem, NavItemWithChildren } from "types/nav"
 
 import { docsConfig } from "@/config/docs"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/registry/new-york/ui/button"
+import { Button } from "@/registry/new-york/ui/button"
 
 interface DocsPagerProps {
   doc: Doc
@@ -21,22 +20,20 @@ export function DocsPager({ doc }: DocsPagerProps) {
   return (
     <div className="flex flex-row items-center justify-between">
       {pager?.prev?.href && (
-        <Link
-          href={pager.prev.href}
-          className={buttonVariants({ variant: "outline" })}
-        >
-          <ChevronLeftIcon className="mr-2 h-4 w-4" />
-          {pager.prev.title}
-        </Link>
+        <Button variant="ghost" asChild>
+          <Link href={pager.prev.href}>
+            <ChevronLeft />
+            {pager.prev.title}
+          </Link>
+        </Button>
       )}
       {pager?.next?.href && (
-        <Link
-          href={pager.next.href}
-          className={cn(buttonVariants({ variant: "outline" }), "ml-auto")}
-        >
-          {pager.next.title}
-          <ChevronRightIcon className="ml-2 h-4 w-4" />
-        </Link>
+        <Button variant="ghost" className="ml-auto" asChild>
+          <Link href={pager.next.href}>
+            {pager.next.title}
+            <ChevronRight />
+          </Link>
+        </Button>
       )}
     </div>
   )

apps/www/components/site-header.tsx

@@ -11,7 +11,7 @@ import { buttonVariants } from "@/registry/new-york/ui/button"
 
 export function SiteHeader() {
   return (
-    <header className="sticky top-0 z-50 w-full border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 dark:border-border">
       <div className="container flex h-14 max-w-screen-2xl items-center">
         <MainNav />
         <MobileNav />

apps/www/components/theme-customizer.tsx

@@ -1,15 +1,8 @@
 "use client"
 
 import * as React from "react"
-import {
-  CheckIcon,
-  CopyIcon,
-  InfoCircledIcon,
-  MoonIcon,
-  ResetIcon,
-  SunIcon,
-} from "@radix-ui/react-icons"
 import template from "lodash.template"
+import { Check, Copy, HelpCircle, Moon, Repeat, Sun } from "lucide-react"
 import { useTheme } from "next-themes"
 
 import { cn } from "@/lib/utils"
@@ -123,9 +116,7 @@ export function ThemeCustomizer() {
                             "flex h-5 w-5 items-center justify-center rounded-full bg-[--theme-primary]"
                           )}
                         >
-                          {isActive && (
-                            <CheckIcon className="h-4 w-4 text-white" />
-                          )}
+                          {isActive && <Check className="h-4 w-4 text-white" />}
                         </span>
                         <span className="sr-only">{baseColor.label}</span>
                       </button>
@@ -191,7 +182,7 @@ function Customizer() {
             })
           }}
         >
-          <ResetIcon />
+          <Repeat />
           <span className="sr-only">Reset</span>
         </Button>
       </div>
@@ -201,7 +192,7 @@ function Customizer() {
             <Label className="text-xs">Style</Label>
             <Popover>
               <PopoverTrigger>
-                <InfoCircledIcon className="ml-1 h-3 w-3" />
+                <HelpCircle className="ml-1 h-3 w-3" />
                 <span className="sr-only">About styles</span>
               </PopoverTrigger>
               <PopoverContent
@@ -287,7 +278,7 @@ function Customizer() {
                       "mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]"
                     )}
                   >
-                    {isActive && <CheckIcon className="h-4 w-4 text-white" />}
+                    {isActive && <Check className="h-4 w-4 text-white" />}
                   </span>
                   {theme.label}
                 </Button>
@@ -334,7 +325,7 @@ function Customizer() {
                   onClick={() => setMode("light")}
                   className={cn(mode === "light" && "border-2 border-primary")}
                 >
-                  <SunIcon className="mr-1 -translate-x-1" />
+                  <Sun className="mr-1 -translate-x-1" />
                   Light
                 </Button>
                 <Button
@@ -343,7 +334,7 @@ function Customizer() {
                   onClick={() => setMode("dark")}
                   className={cn(mode === "dark" && "border-2 border-primary")}
                 >
-                  <MoonIcon className="mr-1 -translate-x-1" />
+                  <Moon className="mr-1 -translate-x-1" />
                   Dark
                 </Button>
               </>
@@ -391,11 +382,7 @@ function CopyCodeButton({
           className={cn("md:hidden", className)}
           {...props}
         >
-          {hasCopied ? (
-            <CheckIcon className="mr-2 h-4 w-4" />
-          ) : (
-            <CopyIcon className="mr-2 h-4 w-4" />
-          )}
+          {hasCopied ? <Check /> : <Copy />}
           Copy code
         </Button>
       )}
@@ -432,11 +419,7 @@ function CopyCodeButton({
                 }}
                 className="absolute right-4 top-4 bg-muted text-muted-foreground hover:bg-muted hover:text-muted-foreground"
               >
-                {hasCopied ? (
-                  <CheckIcon className="mr-2 h-4 w-4" />
-                ) : (
-                  <CopyIcon className="mr-2 h-4 w-4" />
-                )}
+                {hasCopied ? <Check /> : <Copy />}
                 Copy
               </Button>
             )}

apps/www/config/docs.ts

@@ -71,6 +71,11 @@ export const docsConfig: DocsConfig = {
           href: "/docs/cli",
           items: [],
         },
+        {
+          title: "Next.js 15 + React 19",
+          href: "/docs/react-19",
+          items: [],
+        },
         {
           title: "Typography",
           href: "/docs/components/typography",

apps/www/content/docs/cli.mdx

@@ -85,6 +85,7 @@ Options:
   -y, --yes          skip confirmation prompt. (default: false)
   -o, --overwrite    overwrite existing files. (default: false)
   -c, --cwd <cwd>    the working directory. defaults to the current directory.
+  -a, --all          add all available components. (default: false)
   -p, --path <path>  the path to add the component to.
   -h, --help         display help for command
 ```

apps/www/content/docs/components/calendar.mdx

@@ -88,3 +88,14 @@ You can use the `<Calendar>` component to build a date picker. See the [Date Pic
 ### Form
 
 <ComponentPreview name="calendar-form" />
+
+## Changelog
+
+### 11-03-2024 day_outside color
+
+- Changed the color of the `day_outside` class to the following to improve contrast:
+
+  ```tsx showLineNumbers title="calendar.tsx"
+  "day_outside:
+        "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+  ```

apps/www/content/docs/components/card.mdx

@@ -72,3 +72,35 @@ import {
   name="card-demo"
   description="A card showing notifications settings."
 />
+
+## Changelog
+
+### 11-03-2024 a11y for title and description
+
+- Changed the `CardTitle` and `CardDescription` components to use `div` instead of `h3` and `p` to improve accessibility.
+
+```tsx showLineNumbers title="card.tsx"
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+```

apps/www/content/docs/components/chart.mdx

@@ -4,6 +4,12 @@ description: Beautiful charts. Built using Recharts. Copy and paste into your ap
 component: true
 ---
 
+<Callout className="mb-6">
+
+**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).
+
+</Callout>
+
 <ComponentPreview
   name="chart-bar-interactive"
   className="-mt-4 [&_.preview]:p-0 [&_.preview]:border-t [&_.preview>div]:shadow-none [&_.preview>div]:border-none [&_.preview>div]:w-full [&_.preview]:lg:min-h-[404px]"
@@ -47,7 +53,7 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
 
 <Callout className="mt-4">
 
-**Note:** If you are trying to use charts with **React 19** or the **Next.js 15**, you will need the [recharts@alpha](https://github.com/recharts/recharts/releases/tag/v2.13.0-alpha.4) release currently.
+**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).
 
 </Callout>
 

apps/www/content/docs/components/command.mdx

@@ -136,3 +136,27 @@ export function CommandMenu() {
 ### Combobox
 
 You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.
+
+## Changelog
+
+### 2024-10-25 Classes for icons
+
+Added `gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0` to the `<CommandItem />` to automatically style icon inside.
+
+Add the following classes to the `cva` call in your `command.tsx` file.
+
+```tsx showLineNumbers title="command.tsx"
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "... gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    )}
+    {...props}
+  />
+))
+```

apps/www/content/docs/components/dropdown-menu.mdx

@@ -120,3 +120,23 @@ const DropdownMenuItem = React.forwardRef<
   />
 ))
 ```
+
+### 2024-10-25 Classes for `<DropdownMenuSubTrigger />`
+
+Added `gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0` to the `<DropdownMenuSubTrigger />` to automatically style icon inside.
+
+Add the following classes to the `cva` call in your `dropdown-menu.tsx` file.
+
+```tsx title="dropdown-menu.tsx"
+<DropdownMenuPrimitive.SubTrigger
+  ref={ref}
+  className={cn(
+    "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    inset && "pl-8",
+    className
+  )}
+  {...props}
+>
+  {/* ... */}
+</DropdownMenuPrimitive.SubTrigger>
+```

apps/www/content/docs/components/sidebar.mdx

@@ -406,6 +406,40 @@ You can change the keyboard shortcut by updating the `SIDEBAR_KEYBOARD_SHORTCUT`
 const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 ```
 
+### Persisted State
+
+The `SidebarProvider` supports persisting the sidebar state across page reloads and server-side rendering. It uses cookies to store the current state of the sidebar. When the sidebar state changes, a default cookie named `sidebar:state` is set with the current open/closed state. This cookie is then read on subsequent page loads to restore the sidebar state.
+
+To persist sidebar state in Next.js, set up your `SidebarProvider` in `app/layout.tsx` like this:
+
+```tsx showLineNumbers title="app/layout.tsx"
+import { cookies } from "next/headers"
+
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { AppSidebar } from "@/components/app-sidebar"
+
+export async function Layout({ children }: { children: React.ReactNode }) {
+  const cookieStore = await cookies()
+  const defaultOpen = cookieStore.get("sidebar:state")?.value === "true"
+
+  return (
+    <SidebarProvider defaultOpen={defaultOpen}>
+      <AppSidebar />
+      <main>
+        <SidebarTrigger />
+        {children}
+      </main>
+    </SidebarProvider>
+  )
+}
+```
+
+You can change the name of the cookie by updating the `SIDEBAR_COOKIE_NAME` variable in `sidebar.tsx`.
+
+```tsx showLineNumbers title="components/ui/sidebar.tsx"
+const SIDEBAR_COOKIE_NAME = "sidebar:state"
+```
+
 ## Sidebar
 
 The main `Sidebar` component used to render a collapsible sidebar.
@@ -1323,7 +1357,30 @@ You can find more tips on using states for styling in this [Twitter thread](http
 
 ## Changelog
 
-### 2024-10-21
+### 2024-10-30 Cookie handling in setOpen
+
+- [#5593](https://github.com/shadcn-ui/ui/pull/5593) - Improved setOpen callback logic in `<SidebarProvider>`.
+
+Update the `setOpen` callback in `<SidebarProvider>` as follows:
+
+```tsx showLineNumbers
+const setOpen = React.useCallback(
+  (value: boolean | ((value: boolean) => boolean)) => {
+    const openState = typeof value === "function" ? value(open) : value
+    if (setOpenProp) {
+      setOpenProp(openState)
+    } else {
+      _setOpen(openState)
+    }
+
+    // This sets the cookie to keep the sidebar state.
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+  },
+  [setOpenProp, open]
+)
+```
+
+### 2024-10-21 Fixed `text-sidebar-foreground`
 
 - [#5491](https://github.com/shadcn-ui/ui/pull/5491) - Moved `text-sidebar-foreground` from `<SidebarProvider>` to `<Sidebar>` component.
 

apps/www/content/docs/installation/manual.mdx

@@ -27,12 +27,6 @@ If you're using the `default` style, install `lucide-react`:
 npm install lucide-react
 ```
 
-If you're using the `new-york` style, install `@radix-ui/react-icons`:
-
-```bash
-npm install @radix-ui/react-icons
-```
-
 ### Configure path aliases
 
 I use the `@` alias. This is how I configure it in tsconfig.json:

apps/www/content/docs/installation/next.mdx

@@ -3,6 +3,12 @@ title: Next.js
 description: Install and configure Next.js.
 ---
 
+<Callout>
+
+**If you're using Next.js 15, see the [Next.js 15 + React 19](/docs/react-19) guide.**
+
+</Callout>
+
 <Steps>
 
 ### Create project

apps/www/content/docs/installation/vite.mdx

@@ -23,6 +23,29 @@ npm install -D tailwindcss postcss autoprefixer
 npx tailwindcss init -p
 ```
 
+Add this import header in your main css file, `src/index.css` in our case:
+
+```css {1-3} showLineNumbers
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ... */
+```
+
+Configure the tailwind template paths in `tailwind.config.js`:
+
+```js {3}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
 ### Edit tsconfig.json file
 
 The current version of Vite splits TypeScript configuration into three files, two of which need to be edited.

apps/www/content/docs/react-19.mdx

@@ -0,0 +1,168 @@
+---
+title: Next.js 15 + React 19
+description: Using shadcn/ui with Next.js 15 and React 19.
+---
+
+<Callout>
+  **The following guide applies to any framework that supports React 19**. I
+  titled this page "Next.js 15 + React 19" to help people upgrading to Next.js
+  15 find it. We are working with package maintainers to help upgrade to React
+  19.
+</Callout>
+
+## TL;DR
+
+If you're using `npm`, you can install shadcn/ui dependencies with a flag. The `shadcn` CLI will prompt you to select a flag when you run it. No flags required for pnpm, bun, or yarn.
+
+See [Upgrade Status](#upgrade-status) for the status of React 19 support for each package.
+
+## What's happening?
+
+React 19 is now [rc](https://www.npmjs.com/package/react?activeTab=versions) and is [tested and supported in the latest Next.js 15 release](https://nextjs.org/blog/next-15#react-19).
+
+To support React 19, package maintainers will need to test and update their packages to include React 19 as a peer dependency. This is [already](https://github.com/radix-ui/primitives/pull/2952) [in](https://github.com/pacocoursey/cmdk/pull/318) [progress](https://github.com/emilkowalski/vaul/pull/498).
+
+```diff /^19.0/
+"peerDependencies": {
+-  "react": "^16.8 || ^17.0 || ^18.0",
++  "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
+-  "react-dom": "^16.8 || ^17.0 || ^18.0"
++  "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
+},
+```
+
+<Callout>
+  You can check if a package lists React 19 as a peer dependency by running
+  `npm info <package> peerDependencies`.
+</Callout>
+
+In the meantime, if you are installing a package that **does not** list React 19 as a peer dependency, you will see an error message like this:
+
+```bash
+npm error code ERESOLVE
+npm error ERESOLVE unable to resolve dependency tree
+npm error
+npm error While resolving: my-app@0.1.0
+npm error Found: react@19.0.0-rc-69d4b800-20241021
+npm error node_modules/react
+npm error   react@"19.0.0-rc-69d4b800-20241021" from the root project
+```
+
+<Callout>
+  **Note:** This is npm only. PNPM and Bun will only show a silent warning.
+</Callout>
+
+## How to fix this
+
+### Solution 1: `--force` or `--legacy-peer-deps`
+
+You can force install a package with the `--force` or the `--legacy-peer-deps` flag.
+
+```bash
+npm i <package> --force
+
+npm i <package> --legacy-peer-deps
+```
+
+This will install the package and ignore the peer dependency warnings.
+
+<Accordion type="multiple">
+  <AccordionItem value="flags">
+    <AccordionTrigger className="font-medium">
+      What do the `--force` and `--legacy-peer-deps` flag do?
+    </AccordionTrigger>
+    <AccordionContent className="[&_ul]:mt-0">
+
+      - `--force`: Ignores and overrides any dependency conflicts, forcing the
+        installation of packages.
+      - `--legacy-peer-deps`: Skips strict peer dependency checks, allowing
+        installation of packages with unmet peer dependencies to avoid errors.
+
+    </AccordionContent>
+
+  </AccordionItem>
+</Accordion>
+
+### Solution 2: Use React 18
+
+You can downgrade `react` and `react-dom` to version 18, which is compatible with the package you are installing and upgrade when the dependency is updated.
+
+```bash
+npm i react@18 react-dom@18
+```
+
+Whichever solution you choose, make sure you test your app thoroughly to ensure
+there are no regressions.
+
+## Using shadcn/ui on Next.js 15
+
+### Using pnpm, bun, or yarn
+
+Follow the instructions in the [installation guide](/docs/installation/next) to install shadcn/ui. No flags are needed.
+
+### Using npm
+
+When you run `npx shadcn@latest init -d`, you will be prompted to select an option to resolve the peer dependency issues.
+
+```bash
+It looks like you are using React 19.
+Some packages may fail to install due to peer dependency issues (see https://ui.shadcn.com/react-19).
+
+? How would you like to proceed? › - Use arrow-keys. Return to submit.
+❯   Use --force
+    Use --legacy-peer-deps
+```
+
+You can then run the command with the flag you choose.
+
+## Adding components
+
+The process for adding components is the same as above. Select a flag to resolve the peer dependency issues.
+
+**Remember to always test your app after installing new dependencies.**
+
+## Upgrade Status
+
+To make it easy for you track the progress of the upgrade, I've created a table below with React 19 support status for the shadcn/ui dependencies.
+
+- ✅ - Works with React 19 using npm, pnpm, and bun.
+- 🚧 - Works with React 19 using pnpm and bun. Requires flag for npm. PR is in progress.
+
+| Package                                                                            | Status | Note                                                        |
+| ---------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------- |
+| [radix-ui](https://www.npmjs.com/package/@radix-ui/react-icons)                    | ✅     |                                                             |
+| [lucide-react](https://www.npmjs.com/package/lucide-react)                         | ✅     |                                                             |
+| [class-variance-authority](https://www.npmjs.com/package/class-variance-authority) | ✅     | Does not list React 19 as a peer dependency.                |
+| [tailwindcss-animate](https://www.npmjs.com/package/tailwindcss-animate)           | ✅     | Does not list React 19 as a peer dependency.                |
+| [embla-carousel-react](https://www.npmjs.com/package/embla-carousel-react)         | ✅     |                                                             |
+| [recharts](https://www.npmjs.com/package/recharts)                                 | ✅     | See note [below](#recharts)                                 |
+| [react-hook-form](https://www.npmjs.com/package/react-hook-form)                   | ✅     |                                                             |
+| [react-resizable-panels](https://www.npmjs.com/package/react-resizable-panels)     | ✅     |                                                             |
+| [sonner](https://www.npmjs.com/package/sonner)                                     | ✅     |                                                             |
+| [react-day-picker](https://www.npmjs.com/package/react-day-picker)                 | ✅     | Works with flag for npm. Work to upgrade to v9 in progress. |
+| [input-otp](https://www.npmjs.com/package/input-otp)                               | ✅     |                                                             |
+| [vaul](https://www.npmjs.com/package/vaul)                                         | ✅     |                                                             |
+| [@radix-ui/react-icons](https://www.npmjs.com/package/@radix-ui/react-icons)       | 🚧     | See [PR #194](https://github.com/radix-ui/icons/pull/194)   |
+| [cmdk](https://www.npmjs.com/package/cmdk)                                         | ✅     |                                                             |
+
+If you have any questions, please [open an issue](https://github.com/shadcn/ui/issues) on GitHub.
+
+## Recharts
+
+To use recharts with React 19, you will need to override the `react-is` dependency.
+
+<Steps>
+
+<Step>Add the following to your `package.json`</Step>
+
+```json title="package.json"
+"overrides": {
+  "react-is": "^19.0.0-rc-69d4b800-20241021"
+}
+```
+
+Note: the `react-is` version needs to match the version of React 19 you are using. The above is an example.
+
+<Step>Run `npm install --legacy-peer-deps`</Step>
+
+</Steps>

apps/www/next.config.mjs

@@ -58,6 +58,11 @@ const nextConfig = {
         destination: "/docs/components/sidebar",
         permanent: true,
       },
+      {
+        source: "/react-19",
+        destination: "/docs/react-19",
+        permanent: true,
+      },
     ]
   },
 }

apps/www/public/r/icons/index.json

@@ -0,0 +1,150 @@
+{
+  "AlertCircle": {
+    "lucide": "AlertCircle",
+    "radix": "ExclamationTriangleIcon"
+  },
+  "ArrowLeft": {
+    "lucide": "ArrowLeft",
+    "radix": "ArrowLeftIcon"
+  },
+  "ArrowRight": {
+    "lucide": "ArrowRight",
+    "radix": "ArrowRightIcon"
+  },
+  "ArrowUpDown": {
+    "lucide": "ArrowUpDown",
+    "radix": "CaretSortIcon"
+  },
+  "BellRing": {
+    "lucide": "BellRing",
+    "radix": "BellIcon"
+  },
+  "Bold": {
+    "lucide": "Bold",
+    "radix": "FontBoldIcon"
+  },
+  "Calculator": {
+    "lucide": "Calculator",
+    "radix": "ComponentPlaceholderIcon"
+  },
+  "Calendar": {
+    "lucide": "Calendar",
+    "radix": "CalendarIcon"
+  },
+  "Check": {
+    "lucide": "Check",
+    "radix": "CheckIcon"
+  },
+  "ChevronDown": {
+    "lucide": "ChevronDown",
+    "radix": "ChevronDownIcon"
+  },
+  "ChevronLeft": {
+    "lucide": "ChevronLeft",
+    "radix": "ChevronLeftIcon"
+  },
+  "ChevronRight": {
+    "lucide": "ChevronRight",
+    "radix": "ChevronRightIcon"
+  },
+  "ChevronUp": {
+    "lucide": "ChevronUp",
+    "radix": "ChevronUpIcon"
+  },
+  "ChevronsUpDown": {
+    "lucide": "ChevronsUpDown",
+    "radix": "CaretSortIcon"
+  },
+  "Circle": {
+    "lucide": "Circle",
+    "radix": "DotFilledIcon"
+  },
+  "Copy": {
+    "lucide": "Copy",
+    "radix": "CopyIcon"
+  },
+  "CreditCard": {
+    "lucide": "CreditCard",
+    "radix": "ComponentPlaceholderIcon"
+  },
+  "GripVertical": {
+    "lucide": "GripVertical",
+    "radix": "DragHandleDots2Icon"
+  },
+  "Italic": {
+    "lucide": "Italic",
+    "radix": "FontItalicIcon"
+  },
+  "Loader2": {
+    "lucide": "Loader2",
+    "radix": "ReloadIcon"
+  },
+  "Mail": {
+    "lucide": "Mail",
+    "radix": "EnvelopeClosedIcon"
+  },
+  "MailOpen": {
+    "lucide": "MailOpen",
+    "radix": "EnvelopeOpenIcon"
+  },
+  "Minus": {
+    "lucide": "Minus",
+    "radix": "MinusIcon"
+  },
+  "Moon": {
+    "lucide": "Moon",
+    "radix": "MoonIcon"
+  },
+  "MoreHorizontal": {
+    "lucide": "MoreHorizontal",
+    "radix": "DotsHorizontalIcon"
+  },
+  "PanelLeft": {
+    "lucide": "PanelLeft",
+    "radix": "ViewVerticalIcon"
+  },
+  "Plus": {
+    "lucide": "Plus",
+    "radix": "PlusIcon"
+  },
+  "Search": {
+    "lucide": "Search",
+    "radix": "MagnifyingGlassIcon"
+  },
+  "Send": {
+    "lucide": "Send",
+    "radix": "PaperPlaneIcon"
+  },
+  "Settings": {
+    "lucide": "Settings",
+    "radix": "GearIcon"
+  },
+  "Slash": {
+    "lucide": "Slash",
+    "radix": "SlashIcon"
+  },
+  "Smile": {
+    "lucide": "Smile",
+    "radix": "FaceIcon"
+  },
+  "Sun": {
+    "lucide": "Sun",
+    "radix": "SunIcon"
+  },
+  "Terminal": {
+    "lucide": "Terminal",
+    "radix": "RocketIcon"
+  },
+  "Underline": {
+    "lucide": "Underline",
+    "radix": "UnderlineIcon"
+  },
+  "User": {
+    "lucide": "User",
+    "radix": "PersonIcon"
+  },
+  "X": {
+    "lucide": "X",
+    "radix": "Cross2Icon"
+  }
+}

apps/www/public/r/styles/default/button-icon.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "example/button-icon.tsx",
-      "content": "import { ChevronRight } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonIcon() {\n  return (\n    <Button variant=\"outline\" size=\"icon\">\n      <ChevronRight className=\"h-4 w-4\" />\n    </Button>\n  )\n}\n",
+      "content": "import { ChevronRight } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonIcon() {\n  return (\n    <Button variant=\"outline\" size=\"icon\">\n      <ChevronRight />\n    </Button>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/default/button-loading.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "example/button-loading.tsx",
-      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonLoading() {\n  return (\n    <Button disabled>\n      <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
+      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function ButtonLoading() {\n  return (\n    <Button disabled>\n      <Loader2 className=\"animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/default/calendar.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeft className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRight className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/default/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: \"h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20\",\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-9 w-9 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeft className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRight className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
       "type": "registry:ui",
       "target": ""
     }

apps/www/public/r/styles/default/card.json

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-lg border bg-card text-card-foreground shadow-sm\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"text-2xl font-semibold leading-none tracking-tight\",\n      className\n    )}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
       "type": "registry:ui",
       "target": ""
     }

apps/www/public/r/styles/default/collapsible-demo.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "example/collapsible-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus, X } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      className=\"w-[350px] space-y-2\"\n    >\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\" className=\"w-9 p-0\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      className=\"w-[350px] space-y-2\"\n    >\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\" className=\"w-9 p-0\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border px-4 py-3 font-mono text-sm\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/default/combobox-demo.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "example/combobox-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n]\n\nexport default function ComboboxDemo() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : \"Select framework...\"}\n          <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? \"\" : currentValue)\n                    setOpen(false)\n                  }}\n                >\n                  <Check\n                    className={cn(\n                      \"mr-2 h-4 w-4\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                  {framework.label}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n]\n\nexport default function ComboboxDemo() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : \"Select framework...\"}\n          <ChevronsUpDown className=\"opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? \"\" : currentValue)\n                    setOpen(false)\n                  }}\n                >\n                  {framework.label}\n                  <Check\n                    className={cn(\n                      \"ml-auto\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/default/combobox-form.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/combobox-form.tsx",
-      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst languages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Chinese\", value: \"zh\" },\n] as const\n\nconst FormSchema = z.object({\n  language: z.string({\n    required_error: \"Please select a language.\",\n  }),\n})\n\nexport default function ComboboxForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"language\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Language</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant=\"outline\"\n                      role=\"combobox\"\n                      className={cn(\n                        \"w-[200px] justify-between\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value\n                        ? languages.find(\n                            (language) => language.value === field.value\n                          )?.label\n                        : \"Select language\"}\n                      <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-[200px] p-0\">\n                  <Command>\n                    <CommandInput placeholder=\"Search language...\" />\n                    <CommandList>\n                      <CommandEmpty>No language found.</CommandEmpty>\n                      <CommandGroup>\n                        {languages.map((language) => (\n                          <CommandItem\n                            value={language.label}\n                            key={language.value}\n                            onSelect={() => {\n                              form.setValue(\"language\", language.value)\n                            }}\n                          >\n                            <Check\n                              className={cn(\n                                \"mr-2 h-4 w-4\",\n                                language.value === field.value\n                                  ? \"opacity-100\"\n                                  : \"opacity-0\"\n                              )}\n                            />\n                            {language.label}\n                          </CommandItem>\n                        ))}\n                      </CommandGroup>\n                    </CommandList>\n                  </Command>\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                This is the language that will be used in the dashboard.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/default/hooks/use-toast\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/default/ui/command\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/default/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nconst languages = [\n  { label: \"English\", value: \"en\" },\n  { label: \"French\", value: \"fr\" },\n  { label: \"German\", value: \"de\" },\n  { label: \"Spanish\", value: \"es\" },\n  { label: \"Portuguese\", value: \"pt\" },\n  { label: \"Russian\", value: \"ru\" },\n  { label: \"Japanese\", value: \"ja\" },\n  { label: \"Korean\", value: \"ko\" },\n  { label: \"Chinese\", value: \"zh\" },\n] as const\n\nconst FormSchema = z.object({\n  language: z.string({\n    required_error: \"Please select a language.\",\n  }),\n})\n\nexport default function ComboboxForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-6\">\n        <FormField\n          control={form.control}\n          name=\"language\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Language</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant=\"outline\"\n                      role=\"combobox\"\n                      className={cn(\n                        \"w-[200px] justify-between\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value\n                        ? languages.find(\n                            (language) => language.value === field.value\n                          )?.label\n                        : \"Select language\"}\n                      <ChevronsUpDown className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-[200px] p-0\">\n                  <Command>\n                    <CommandInput placeholder=\"Search language...\" />\n                    <CommandList>\n                      <CommandEmpty>No language found.</CommandEmpty>\n                      <CommandGroup>\n                        {languages.map((language) => (\n                          <CommandItem\n                            value={language.label}\n                            key={language.value}\n                            onSelect={() => {\n                              form.setValue(\"language\", language.value)\n                            }}\n                          >\n                            {language.label}\n                            <Check\n                              className={cn(\n                                \"ml-auto\",\n                                language.value === field.value\n                                  ? \"opacity-100\"\n                                  : \"opacity-0\"\n                              )}\n                            />\n                          </CommandItem>\n                        ))}\n                      </CommandGroup>\n                    </CommandList>\n                  </Command>\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                This is the language that will be used in the dashboard.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/default/date-picker-demo.json

@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "example/date-picker-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { Calendar as CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function DatePickerDemo() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[280px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport default function DatePickerDemo() {\n  const [date, setDate] = React.useState<Date>()\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          variant={\"outline\"}\n          className={cn(\n            \"w-[280px] justify-start text-left font-normal\",\n            !date && \"text-muted-foreground\"\n          )}\n        >\n          <CalendarIcon />\n          {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\">\n        <Calendar\n          mode=\"single\"\n          selected={date}\n          onSelect={setDate}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/default/dialog-close-button.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "example/dialog-close-button.tsx",
-      "content": "import { Copy } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function DialogCloseButton() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Share</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Share link</DialogTitle>\n          <DialogDescription>\n            Anyone who has this link will be able to view this.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"flex items-center space-x-2\">\n          <div className=\"grid flex-1 gap-2\">\n            <Label htmlFor=\"link\" className=\"sr-only\">\n              Link\n            </Label>\n            <Input\n              id=\"link\"\n              defaultValue=\"https://ui.shadcn.com/docs/installation\"\n              readOnly\n            />\n          </div>\n          <Button type=\"submit\" size=\"sm\" className=\"px-3\">\n            <span className=\"sr-only\">Copy</span>\n            <Copy className=\"h-4 w-4\" />\n          </Button>\n        </div>\n        <DialogFooter className=\"sm:justify-start\">\n          <DialogClose asChild>\n            <Button type=\"button\" variant=\"secondary\">\n              Close\n            </Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
+      "content": "import { Copy } from \"lucide-react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport default function DialogCloseButton() {\n  return (\n    <Dialog>\n      <DialogTrigger asChild>\n        <Button variant=\"outline\">Share</Button>\n      </DialogTrigger>\n      <DialogContent className=\"sm:max-w-md\">\n        <DialogHeader>\n          <DialogTitle>Share link</DialogTitle>\n          <DialogDescription>\n            Anyone who has this link will be able to view this.\n          </DialogDescription>\n        </DialogHeader>\n        <div className=\"flex items-center space-x-2\">\n          <div className=\"grid flex-1 gap-2\">\n            <Label htmlFor=\"link\" className=\"sr-only\">\n              Link\n            </Label>\n            <Input\n              id=\"link\"\n              defaultValue=\"https://ui.shadcn.com/docs/installation\"\n              readOnly\n            />\n          </div>\n          <Button type=\"submit\" size=\"sm\" className=\"px-3\">\n            <span className=\"sr-only\">Copy</span>\n            <Copy />\n          </Button>\n        </div>\n        <DialogFooter className=\"sm:justify-start\">\n          <DialogClose asChild>\n            <Button type=\"button\" variant=\"secondary\">\n              Close\n            </Button>\n          </DialogClose>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/default/drawer-demo.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "example/drawer-demo.tsx",
-      "content": "import * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport default function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus className=\"h-4 w-4\" />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus className=\"h-4 w-4\" />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\"\n\nconst data = [\n  {\n    goal: 400,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 239,\n  },\n  {\n    goal: 300,\n  },\n  {\n    goal: 200,\n  },\n  {\n    goal: 278,\n  },\n  {\n    goal: 189,\n  },\n  {\n    goal: 349,\n  },\n]\n\nexport default function DrawerDemo() {\n  const [goal, setGoal] = React.useState(350)\n\n  function onClick(adjustment: number) {\n    setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n  }\n\n  return (\n    <Drawer>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\">Open Drawer</Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mx-auto w-full max-w-sm\">\n          <DrawerHeader>\n            <DrawerTitle>Move Goal</DrawerTitle>\n            <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n          </DrawerHeader>\n          <div className=\"p-4 pb-0\">\n            <div className=\"flex items-center justify-center space-x-2\">\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(-10)}\n                disabled={goal <= 200}\n              >\n                <Minus />\n                <span className=\"sr-only\">Decrease</span>\n              </Button>\n              <div className=\"flex-1 text-center\">\n                <div className=\"text-7xl font-bold tracking-tighter\">\n                  {goal}\n                </div>\n                <div className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                  Calories/day\n                </div>\n              </div>\n              <Button\n                variant=\"outline\"\n                size=\"icon\"\n                className=\"h-8 w-8 shrink-0 rounded-full\"\n                onClick={() => onClick(10)}\n                disabled={goal >= 400}\n              >\n                <Plus />\n                <span className=\"sr-only\">Increase</span>\n              </Button>\n            </div>\n            <div className=\"mt-3 h-[120px]\">\n              <ResponsiveContainer width=\"100%\" height=\"100%\">\n                <BarChart data={data}>\n                  <Bar\n                    dataKey=\"goal\"\n                    style={\n                      {\n                        fill: \"hsl(var(--foreground))\",\n                        opacity: 0.9,\n                      } as React.CSSProperties\n                    }\n                  />\n                </BarChart>\n              </ResponsiveContainer>\n            </div>\n          </div>\n          <DrawerFooter>\n            <Button>Submit</Button>\n            <DrawerClose asChild>\n              <Button variant=\"outline\">Cancel</Button>\n            </DrawerClose>\n          </DrawerFooter>\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/default/sonner-demo.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "example/sonner-demo.tsx",
-      "content": "import { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function SonnerDemo() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() =>\n        toast(\"Event has been created\", {\n          description: \"Sunday, December 03, 2023 at 9:00 AM\",\n          action: {\n            label: \"Undo\",\n            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport default function SonnerDemo() {\n  return (\n    <Button\n      variant=\"outline\"\n      onClick={() =>\n        toast(\"Event has been created\", {\n          description: \"Sunday, December 03, 2023 at 9:00 AM\",\n          action: {\n            label: \"Undo\",\n            onClick: () => console.log(\"Undo\"),\n          },\n        })\n      }\n    >\n      Show Toast\n    </Button>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/default/toggle.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "ui/toggle.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-10 px-3\",\n        sm: \"h-9 px-2.5\",\n        lg: \"h-11 px-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-10 px-3 min-w-10\",\n        sm: \"h-9 px-2.5 min-w-9\",\n        lg: \"h-11 px-5 min-w-11\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst Toggle = React.forwardRef<\n  React.ElementRef<typeof TogglePrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &\n    VariantProps<typeof toggleVariants>\n>(({ className, variant, size, ...props }, ref) => (\n  <TogglePrimitive.Root\n    ref={ref}\n    className={cn(toggleVariants({ variant, size, className }))}\n    {...props}\n  />\n))\n\nToggle.displayName = TogglePrimitive.Root.displayName\n\nexport { Toggle, toggleVariants }\n",
       "type": "registry:ui",
       "target": ""
     }

apps/www/public/r/styles/new-york/accordion.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDownIcon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\"border-b\", className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDownIcon className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n    {...props}\n  >\n    <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\"border-b\", className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = \"AccordionItem\"\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown className=\"h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n))\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n    {...props}\n  >\n    <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui",
       "target": ""
     }

apps/www/public/r/styles/new-york/alert-demo.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "example/alert-demo.tsx",
-      "content": "import { RocketIcon } from \"@radix-ui/react-icons\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york/ui/alert\"\n\nexport default function AlertDemo() {\n  return (\n    <Alert>\n      <RocketIcon className=\"h-4 w-4\" />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        You can add components to your app using the cli.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "content": "import { Terminal } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york/ui/alert\"\n\nexport default function AlertDemo() {\n  return (\n    <Alert>\n      <Terminal className=\"h-4 w-4\" />\n      <AlertTitle>Heads up!</AlertTitle>\n      <AlertDescription>\n        You can add components to your app using the cli.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/new-york/alert-destructive.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "example/alert-destructive.tsx",
-      "content": "import { ExclamationTriangleIcon } from \"@radix-ui/react-icons\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york/ui/alert\"\n\nexport default function AlertDestructive() {\n  return (\n    <Alert variant=\"destructive\">\n      <ExclamationTriangleIcon className=\"h-4 w-4\" />\n      <AlertTitle>Error</AlertTitle>\n      <AlertDescription>\n        Your session has expired. Please log in again.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
+      "content": "import { AlertCircle } from \"lucide-react\"\n\nimport {\n  Alert,\n  AlertDescription,\n  AlertTitle,\n} from \"@/registry/new-york/ui/alert\"\n\nexport default function AlertDestructive() {\n  return (\n    <Alert variant=\"destructive\">\n      <AlertCircle className=\"h-4 w-4\" />\n      <AlertTitle>Error</AlertTitle>\n      <AlertDescription>\n        Your session has expired. Please log in again.\n      </AlertDescription>\n    </Alert>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/new-york/breadcrumb-dropdown.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "example/breadcrumb-dropdown.tsx",
-      "content": "import { ChevronDownIcon, SlashIcon } from \"@radix-ui/react-icons\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport default function BreadcrumbWithDropdown() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <SlashIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              Components\n              <ChevronDownIcon />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <SlashIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "content": "import { ChevronDown, Slash } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport default function BreadcrumbWithDropdown() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <DropdownMenu>\n            <DropdownMenuTrigger className=\"flex items-center gap-1\">\n              Components\n              <ChevronDown />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem>Documentation</DropdownMenuItem>\n              <DropdownMenuItem>Themes</DropdownMenuItem>\n              <DropdownMenuItem>GitHub</DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/new-york/breadcrumb-separator.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "example/breadcrumb-separator.tsx",
-      "content": "import { SlashIcon } from \"@radix-ui/react-icons\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <SlashIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <SlashIcon />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
+      "content": "import { Slash } from \"lucide-react\"\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from \"@/registry/new-york/ui/breadcrumb\"\n\nexport default function BreadcrumbWithCustomSeparator() {\n  return (\n    <Breadcrumb>\n      <BreadcrumbList>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/\">Home</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbLink href=\"/components\">Components</BreadcrumbLink>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator>\n          <Slash />\n        </BreadcrumbSeparator>\n        <BreadcrumbItem>\n          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n        </BreadcrumbItem>\n      </BreadcrumbList>\n    </Breadcrumb>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/new-york/breadcrumb.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { ChevronRightIcon, DotsHorizontalIcon } from \"@radix-ui/react-icons\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<\"nav\"> & {\n    separator?: React.ReactNode\n  }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n  HTMLOListElement,\n  React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n  <ol\n    ref={ref}\n    className={cn(\n      \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5\",\n      className\n    )}\n    {...props}\n  />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    className={cn(\"inline-flex items-center gap-1.5\", className)}\n    {...props}\n  />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentPropsWithoutRef<\"a\"> & {\n    asChild?: boolean\n  }\n>(({ asChild, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    className={cn(\"font-normal text-foreground\", className)}\n    {...props}\n  />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"[&>svg]:w-3.5 [&>svg]:h-3.5\", className)}\n    {...props}\n  >\n    {children ?? <ChevronRightIcon />}\n  </li>\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <DotsHorizontalIcon className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbElipssis\"\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<\"nav\"> & {\n    separator?: React.ReactNode\n  }\n>(({ ...props }, ref) => <nav ref={ref} aria-label=\"breadcrumb\" {...props} />)\nBreadcrumb.displayName = \"Breadcrumb\"\n\nconst BreadcrumbList = React.forwardRef<\n  HTMLOListElement,\n  React.ComponentPropsWithoutRef<\"ol\">\n>(({ className, ...props }, ref) => (\n  <ol\n    ref={ref}\n    className={cn(\n      \"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5\",\n      className\n    )}\n    {...props}\n  />\n))\nBreadcrumbList.displayName = \"BreadcrumbList\"\n\nconst BreadcrumbItem = React.forwardRef<\n  HTMLLIElement,\n  React.ComponentPropsWithoutRef<\"li\">\n>(({ className, ...props }, ref) => (\n  <li\n    ref={ref}\n    className={cn(\"inline-flex items-center gap-1.5\", className)}\n    {...props}\n  />\n))\nBreadcrumbItem.displayName = \"BreadcrumbItem\"\n\nconst BreadcrumbLink = React.forwardRef<\n  HTMLAnchorElement,\n  React.ComponentPropsWithoutRef<\"a\"> & {\n    asChild?: boolean\n  }\n>(({ asChild, className, ...props }, ref) => {\n  const Comp = asChild ? Slot : \"a\"\n\n  return (\n    <Comp\n      ref={ref}\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n})\nBreadcrumbLink.displayName = \"BreadcrumbLink\"\n\nconst BreadcrumbPage = React.forwardRef<\n  HTMLSpanElement,\n  React.ComponentPropsWithoutRef<\"span\">\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    role=\"link\"\n    aria-disabled=\"true\"\n    aria-current=\"page\"\n    className={cn(\"font-normal text-foreground\", className)}\n    {...props}\n  />\n))\nBreadcrumbPage.displayName = \"BreadcrumbPage\"\n\nconst BreadcrumbSeparator = ({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) => (\n  <li\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"[&>svg]:w-3.5 [&>svg]:h-3.5\", className)}\n    {...props}\n  >\n    {children ?? <ChevronRight />}\n  </li>\n)\nBreadcrumbSeparator.displayName = \"BreadcrumbSeparator\"\n\nconst BreadcrumbEllipsis = ({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) => (\n  <span\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n    {...props}\n  >\n    <MoreHorizontal className=\"h-4 w-4\" />\n    <span className=\"sr-only\">More</span>\n  </span>\n)\nBreadcrumbEllipsis.displayName = \"BreadcrumbElipssis\"\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui",
       "target": ""
     }

apps/www/public/r/styles/new-york/button-icon.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "example/button-icon.tsx",
-      "content": "import { ChevronRightIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonIcon() {\n  return (\n    <Button variant=\"outline\" size=\"icon\">\n      <ChevronRightIcon className=\"h-4 w-4\" />\n    </Button>\n  )\n}\n",
+      "content": "import { ChevronRight } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonIcon() {\n  return (\n    <Button variant=\"outline\" size=\"icon\">\n      <ChevronRight />\n    </Button>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/new-york/button-loading.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "example/button-loading.tsx",
-      "content": "import { ReloadIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonLoading() {\n  return (\n    <Button disabled>\n      <ReloadIcon className=\"mr-2 h-4 w-4 animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
+      "content": "import { Loader2 } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonLoading() {\n  return (\n    <Button disabled>\n      <Loader2 className=\"animate-spin\" />\n      Please wait\n    </Button>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/new-york/button-with-icon.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "example/button-with-icon.tsx",
-      "content": "import { EnvelopeOpenIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonWithIcon() {\n  return (\n    <Button>\n      <EnvelopeOpenIcon /> Login with Email\n    </Button>\n  )\n}\n",
+      "content": "import { MailOpen } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\n\nexport default function ButtonWithIcon() {\n  return (\n    <Button>\n      <MailOpen /> Login with Email\n    </Button>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/new-york/calendar-form.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "example/calendar-form.tsx",
-      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { CalendarIcon } from \"@radix-ui/react-icons\"\nimport { format } from \"date-fns\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function CalendarForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    initialFocus\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { useForm } from \"react-hook-form\"\nimport { z } from \"zod\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toast } from \"@/registry/new-york/hooks/use-toast\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from \"@/registry/new-york/ui/form\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst FormSchema = z.object({\n  dob: z.date({\n    required_error: \"A date of birth is required.\",\n  }),\n})\n\nexport default function CalendarForm() {\n  const form = useForm<z.infer<typeof FormSchema>>({\n    resolver: zodResolver(FormSchema),\n  })\n\n  function onSubmit(data: z.infer<typeof FormSchema>) {\n    toast({\n      title: \"You submitted the following values:\",\n      description: (\n        <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n          <code className=\"text-white\">{JSON.stringify(data, null, 2)}</code>\n        </pre>\n      ),\n    })\n  }\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-8\">\n        <FormField\n          control={form.control}\n          name=\"dob\"\n          render={({ field }) => (\n            <FormItem className=\"flex flex-col\">\n              <FormLabel>Date of birth</FormLabel>\n              <Popover>\n                <PopoverTrigger asChild>\n                  <FormControl>\n                    <Button\n                      variant={\"outline\"}\n                      className={cn(\n                        \"w-[240px] pl-3 text-left font-normal\",\n                        !field.value && \"text-muted-foreground\"\n                      )}\n                    >\n                      {field.value ? (\n                        format(field.value, \"PPP\")\n                      ) : (\n                        <span>Pick a date</span>\n                      )}\n                      <CalendarIcon className=\"ml-auto h-4 w-4 opacity-50\" />\n                    </Button>\n                  </FormControl>\n                </PopoverTrigger>\n                <PopoverContent className=\"w-auto p-0\" align=\"start\">\n                  <Calendar\n                    mode=\"single\"\n                    selected={field.value}\n                    onSelect={field.onChange}\n                    disabled={(date) =>\n                      date > new Date() || date < new Date(\"1900-01-01\")\n                    }\n                    initialFocus\n                  />\n                </PopoverContent>\n              </Popover>\n              <FormDescription>\n                Your date of birth is used to calculate your age.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          )}\n        />\n        <Button type=\"submit\">Submit</Button>\n      </form>\n    </Form>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/new-york/calendar.json

@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "ui/calendar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@radix-ui/react-icons\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeftIcon className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRightIcon className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york/ui/button\"\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n  className,\n  classNames,\n  showOutsideDays = true,\n  ...props\n}: CalendarProps) {\n  return (\n    <DayPicker\n      showOutsideDays={showOutsideDays}\n      className={cn(\"p-3\", className)}\n      classNames={{\n        months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n        month: \"space-y-4\",\n        caption: \"flex justify-center pt-1 relative items-center\",\n        caption_label: \"text-sm font-medium\",\n        nav: \"space-x-1 flex items-center\",\n        nav_button: cn(\n          buttonVariants({ variant: \"outline\" }),\n          \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n        ),\n        nav_button_previous: \"absolute left-1\",\n        nav_button_next: \"absolute right-1\",\n        table: \"w-full border-collapse space-y-1\",\n        head_row: \"flex\",\n        head_cell:\n          \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n        row: \"flex w-full mt-2\",\n        cell: cn(\n          \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md\",\n          props.mode === \"range\"\n            ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n            : \"[&:has([aria-selected])]:rounded-md\"\n        ),\n        day: cn(\n          buttonVariants({ variant: \"ghost\" }),\n          \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n        ),\n        day_range_start: \"day-range-start\",\n        day_range_end: \"day-range-end\",\n        day_selected:\n          \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n        day_today: \"bg-accent text-accent-foreground\",\n        day_outside:\n          \"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground\",\n        day_disabled: \"text-muted-foreground opacity-50\",\n        day_range_middle:\n          \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n        day_hidden: \"invisible\",\n        ...classNames,\n      }}\n      components={{\n        IconLeft: ({ ...props }) => <ChevronLeft className=\"h-4 w-4\" />,\n        IconRight: ({ ...props }) => <ChevronRight className=\"h-4 w-4\" />,\n      }}\n      {...props}\n    />\n  )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n",
       "type": "registry:ui",
       "target": ""
     }

apps/www/public/r/styles/new-york/card-demo.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "example/card-demo.tsx",
-      "content": "import { BellIcon, CheckIcon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Switch } from \"@/registry/new-york/ui/switch\"\n\nconst notifications = [\n  {\n    title: \"Your call has been confirmed.\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"You have a new message!\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"Your subscription is expiring soon!\",\n    description: \"2 hours ago\",\n  },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport default function CardDemo({ className, ...props }: CardProps) {\n  return (\n    <Card className={cn(\"w-[380px]\", className)} {...props}>\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>You have 3 unread messages.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n          <BellIcon />\n          <div className=\"flex-1 space-y-1\">\n            <p className=\"text-sm font-medium leading-none\">\n              Push Notifications\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Send notifications to device.\n            </p>\n          </div>\n          <Switch />\n        </div>\n        <div>\n          {notifications.map((notification, index) => (\n            <div\n              key={index}\n              className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n            >\n              <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n              <div className=\"space-y-1\">\n                <p className=\"text-sm font-medium leading-none\">\n                  {notification.title}\n                </p>\n                <p className=\"text-sm text-muted-foreground\">\n                  {notification.description}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">\n          <CheckIcon /> Mark all as read\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york/ui/card\"\nimport { Switch } from \"@/registry/new-york/ui/switch\"\n\nconst notifications = [\n  {\n    title: \"Your call has been confirmed.\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"You have a new message!\",\n    description: \"1 hour ago\",\n  },\n  {\n    title: \"Your subscription is expiring soon!\",\n    description: \"2 hours ago\",\n  },\n]\n\ntype CardProps = React.ComponentProps<typeof Card>\n\nexport default function CardDemo({ className, ...props }: CardProps) {\n  return (\n    <Card className={cn(\"w-[380px]\", className)} {...props}>\n      <CardHeader>\n        <CardTitle>Notifications</CardTitle>\n        <CardDescription>You have 3 unread messages.</CardDescription>\n      </CardHeader>\n      <CardContent className=\"grid gap-4\">\n        <div className=\" flex items-center space-x-4 rounded-md border p-4\">\n          <BellRing />\n          <div className=\"flex-1 space-y-1\">\n            <p className=\"text-sm font-medium leading-none\">\n              Push Notifications\n            </p>\n            <p className=\"text-sm text-muted-foreground\">\n              Send notifications to device.\n            </p>\n          </div>\n          <Switch />\n        </div>\n        <div>\n          {notifications.map((notification, index) => (\n            <div\n              key={index}\n              className=\"mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0\"\n            >\n              <span className=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n              <div className=\"space-y-1\">\n                <p className=\"text-sm font-medium leading-none\">\n                  {notification.title}\n                </p>\n                <p className=\"text-sm text-muted-foreground\">\n                  {notification.description}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </CardContent>\n      <CardFooter>\n        <Button className=\"w-full\">\n          <Check /> Mark all as read\n        </Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/new-york/card.json

@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "ui/card.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-xl border bg-card text-card-foreground shadow\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn(\"font-semibold leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Card = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      \"rounded-xl border bg-card text-card-foreground shadow\",\n      className\n    )}\n    {...props}\n  />\n))\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n    {...props}\n  />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"font-semibold leading-none tracking-tight\", className)}\n    {...props}\n  />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"text-sm text-muted-foreground\", className)}\n    {...props}\n  />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\"flex items-center p-6 pt-0\", className)}\n    {...props}\n  />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
       "type": "registry:ui",
       "target": ""
     }

apps/www/public/r/styles/new-york/checkbox.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { CheckIcon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"flex items-center justify-center text-current\")}\n    >\n      <CheckIcon className=\"h-4 w-4\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <CheckboxPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\",\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator\n      className={cn(\"flex items-center justify-center text-current\")}\n    >\n      <Check className=\"h-4 w-4\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n",
       "type": "registry:ui",
       "target": ""
     }

apps/www/public/r/styles/new-york/collapsible-demo.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "example/collapsible-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CaretSortIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      className=\"w-[350px] space-y-2\"\n    >\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <CaretSortIcon className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/registry/new-york/ui/collapsible\"\n\nexport default function CollapsibleDemo() {\n  const [isOpen, setIsOpen] = React.useState(false)\n\n  return (\n    <Collapsible\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      className=\"w-[350px] space-y-2\"\n    >\n      <div className=\"flex items-center justify-between space-x-4 px-4\">\n        <h4 className=\"text-sm font-semibold\">\n          @peduarte starred 3 repositories\n        </h4>\n        <CollapsibleTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <ChevronsUpDown className=\"h-4 w-4\" />\n            <span className=\"sr-only\">Toggle</span>\n          </Button>\n        </CollapsibleTrigger>\n      </div>\n      <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n        @radix-ui/primitives\n      </div>\n      <CollapsibleContent className=\"space-y-2\">\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @radix-ui/colors\n        </div>\n        <div className=\"rounded-md border px-4 py-2 font-mono text-sm shadow-sm\">\n          @stitches/react\n        </div>\n      </CollapsibleContent>\n    </Collapsible>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }

apps/www/public/r/styles/new-york/combobox-demo.json

@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "example/combobox-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CaretSortIcon, CheckIcon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n]\n\nexport default function ComboboxDemo() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : \"Select framework...\"}\n          <CaretSortIcon className=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" className=\"h-9\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? \"\" : currentValue)\n                    setOpen(false)\n                  }}\n                >\n                  {framework.label}\n                  <CheckIcon\n                    className={cn(\n                      \"ml-auto h-4 w-4\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, ChevronsUpDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nconst frameworks = [\n  {\n    value: \"next.js\",\n    label: \"Next.js\",\n  },\n  {\n    value: \"sveltekit\",\n    label: \"SvelteKit\",\n  },\n  {\n    value: \"nuxt.js\",\n    label: \"Nuxt.js\",\n  },\n  {\n    value: \"remix\",\n    label: \"Remix\",\n  },\n  {\n    value: \"astro\",\n    label: \"Astro\",\n  },\n]\n\nexport default function ComboboxDemo() {\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState(\"\")\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"outline\"\n          role=\"combobox\"\n          aria-expanded={open}\n          className=\"w-[200px] justify-between\"\n        >\n          {value\n            ? frameworks.find((framework) => framework.value === value)?.label\n            : \"Select framework...\"}\n          <ChevronsUpDown className=\"opacity-50\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-[200px] p-0\">\n        <Command>\n          <CommandInput placeholder=\"Search framework...\" className=\"h-9\" />\n          <CommandList>\n            <CommandEmpty>No framework found.</CommandEmpty>\n            <CommandGroup>\n              {frameworks.map((framework) => (\n                <CommandItem\n                  key={framework.value}\n                  value={framework.value}\n                  onSelect={(currentValue) => {\n                    setValue(currentValue === value ? \"\" : currentValue)\n                    setOpen(false)\n                  }}\n                >\n                  {framework.label}\n                  <Check\n                    className={cn(\n                      \"ml-auto\",\n                      value === framework.value ? \"opacity-100\" : \"opacity-0\"\n                    )}\n                  />\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
       "type": "registry:example",
       "target": ""
     }