{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "sink", "type": "registry:internal", "author": "shadcn (https://ui.shadcn.com)", "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": [ { "path": "internal/sink/page.tsx", "content": "import { AccordionDemo } from \"@/registry/default/internal/sink/components/accordion-demo\"\nimport { AlertDemo } from \"@/registry/default/internal/sink/components/alert-demo\"\nimport { AlertDialogDemo } from \"@/registry/default/internal/sink/components/alert-dialog-demo\"\nimport { AppSidebar } from \"@/registry/default/internal/sink/components/app-sidebar\"\nimport { AspectRatioDemo } from \"@/registry/default/internal/sink/components/aspect-ratio-demo\"\nimport { AvatarDemo } from \"@/registry/default/internal/sink/components/avatar-demo\"\nimport { BadgeDemo } from \"@/registry/default/internal/sink/components/badge-demo\"\nimport { BadgeDestructive } from \"@/registry/default/internal/sink/components/badge-destructive\"\nimport { BadgeOutline } from \"@/registry/default/internal/sink/components/badge-outline\"\nimport { BadgeSecondary } from \"@/registry/default/internal/sink/components/badge-secondary\"\nimport { BreadcrumbDemo } from \"@/registry/default/internal/sink/components/breadcrumb-demo\"\nimport { ButtonDemo } from \"@/registry/default/internal/sink/components/button-demo\"\nimport { ButtonDestructive } from \"@/registry/default/internal/sink/components/button-destructive\"\nimport { ButtonGhost } from \"@/registry/default/internal/sink/components/button-ghost\"\nimport { ButtonLink } from \"@/registry/default/internal/sink/components/button-link\"\nimport { ButtonLoading } from \"@/registry/default/internal/sink/components/button-loading\"\nimport { ButtonOutline } from \"@/registry/default/internal/sink/components/button-outline\"\nimport { ButtonSecondary } from \"@/registry/default/internal/sink/components/button-secondary\"\nimport { ButtonWithIcon } from \"@/registry/default/internal/sink/components/button-with-icon\"\nimport { CalendarDemo } from \"@/registry/default/internal/sink/components/calendar-demo\"\nimport { CardDemo } from \"@/registry/default/internal/sink/components/card-demo\"\nimport { CarouselDemo } from \"@/registry/default/internal/sink/components/carousel-demo\"\nimport { CheckboxDemo } from \"@/registry/default/internal/sink/components/checkbox-demo\"\nimport { CollapsibleDemo } from \"@/registry/default/internal/sink/components/collapsible-demo\"\nimport { ComboboxDemo } from \"@/registry/default/internal/sink/components/combobox-demo\"\nimport { CommandDemo } from \"@/registry/default/internal/sink/components/command-demo\"\nimport { ComponentWrapper } from \"@/registry/default/internal/sink/components/component-wrapper\"\nimport { ContextMenuDemo } from \"@/registry/default/internal/sink/components/context-menu-demo\"\nimport { DatePickerDemo } from \"@/registry/default/internal/sink/components/date-picker-demo\"\nimport { DialogDemo } from \"@/registry/default/internal/sink/components/dialog-demo\"\nimport { DrawerDemo } from \"@/registry/default/internal/sink/components/drawer-demo\"\nimport { DropdownMenuDemo } from \"@/registry/default/internal/sink/components/dropdown-menu-demo\"\nimport { HoverCardDemo } from \"@/registry/default/internal/sink/components/hover-card-demo\"\nimport { InputDemo } from \"@/registry/default/internal/sink/components/input-demo\"\nimport { InputOTPDemo } from \"@/registry/default/internal/sink/components/input-otp-demo\"\nimport { LabelDemo } from \"@/registry/default/internal/sink/components/label-demo\"\nimport { MenubarDemo } from \"@/registry/default/internal/sink/components/menubar-demo\"\nimport { NavigationMenuDemo } from \"@/registry/default/internal/sink/components/navigation-menu-demo\"\nimport { PaginationDemo } from \"@/registry/default/internal/sink/components/pagination-demo\"\nimport { PopoverDemo } from \"@/registry/default/internal/sink/components/popover-demo\"\nimport { ProgressDemo } from \"@/registry/default/internal/sink/components/progress-demo\"\nimport { RadioGroupDemo } from \"@/registry/default/internal/sink/components/radio-group-demo\"\nimport { ResizableHandleDemo } from \"@/registry/default/internal/sink/components/resizable-handle\"\nimport { ScrollAreaDemo } from \"@/registry/default/internal/sink/components/scroll-area-demo\"\nimport { SelectDemo } from \"@/registry/default/internal/sink/components/select-demo\"\nimport { SeparatorDemo } from \"@/registry/default/internal/sink/components/separator-demo\"\nimport { SheetDemo } from \"@/registry/default/internal/sink/components/sheet-demo\"\nimport { SkeletonDemo } from \"@/registry/default/internal/sink/components/skeleton-demo\"\nimport { SliderDemo } from \"@/registry/default/internal/sink/components/slider-demo\"\nimport { SonnerDemo } from \"@/registry/default/internal/sink/components/sonner-demo\"\nimport { SwitchDemo } from \"@/registry/default/internal/sink/components/switch-demo\"\nimport { TableDemo } from \"@/registry/default/internal/sink/components/table-demo\"\nimport { TabsDemo } from \"@/registry/default/internal/sink/components/tabs-demo\"\nimport { TextareaDemo } from \"@/registry/default/internal/sink/components/textarea-demo\"\nimport { ToastDemo } from \"@/registry/default/internal/sink/components/toast-demo\"\nimport { ToggleDemo } from \"@/registry/default/internal/sink/components/toggle-demo\"\nimport { ToggleDisabled } from \"@/registry/default/internal/sink/components/toggle-disabled\"\nimport { ToggleGroupDemo } from \"@/registry/default/internal/sink/components/toggle-group-demo\"\nimport { ToggleOutline } from \"@/registry/default/internal/sink/components/toggle-outline\"\nimport { ToggleWithText } from \"@/registry/default/internal/sink/components/toggle-with-text\"\nimport { TooltipDemo } from \"@/registry/default/internal/sink/components/tooltip-demo\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport { Separator } from \"@/registry/default/ui/separator\"\nimport {\n SidebarInset,\n SidebarProvider,\n SidebarTrigger,\n} from \"@/registry/default/ui/sidebar\"\n\nexport default function SinkPage() {\n return (\n \n \n \n
\n
\n \n \n \n \n \n \n Building Your Application\n \n \n \n \n Data Fetching\n \n \n \n
\n
\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n
\n \n \n \n
\n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n
\n \n \n \n \n \n \n \n
\n
\n \n \n )\n}\n", "type": "registry:page", "target": "app/sink/page.tsx" }, { "path": "internal/sink/components/app-sidebar.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n AudioWaveform,\n BookOpen,\n Bot,\n Command,\n Frame,\n GalleryVerticalEnd,\n Map,\n PieChart,\n Settings2,\n SquareTerminal,\n} from \"lucide-react\"\n\nimport { NavMain } from \"@/registry/default/blocks/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/default/blocks/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/default/blocks/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/default/blocks/sidebar-07/components/team-switcher\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarHeader,\n SidebarRail,\n} from \"@/registry/default/ui/sidebar\"\n\n// This is sample data.\nconst data = {\n user: {\n name: \"shadcn\",\n email: \"m@example.com\",\n avatar: \"/avatars/shadcn.jpg\",\n },\n teams: [\n {\n name: \"Acme Inc\",\n logo: GalleryVerticalEnd,\n plan: \"Enterprise\",\n },\n {\n name: \"Acme Corp.\",\n logo: AudioWaveform,\n plan: \"Startup\",\n },\n {\n name: \"Evil Corp.\",\n logo: Command,\n plan: \"Free\",\n },\n ],\n navMain: [\n {\n title: \"Playground\",\n url: \"#\",\n icon: SquareTerminal,\n isActive: true,\n items: [\n {\n title: \"History\",\n url: \"#\",\n },\n {\n title: \"Starred\",\n url: \"#\",\n },\n {\n title: \"Settings\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Models\",\n url: \"#\",\n icon: Bot,\n items: [\n {\n title: \"Genesis\",\n url: \"#\",\n },\n {\n title: \"Explorer\",\n url: \"#\",\n },\n {\n title: \"Quantum\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Documentation\",\n url: \"#\",\n icon: BookOpen,\n items: [\n {\n title: \"Introduction\",\n url: \"#\",\n },\n {\n title: \"Get Started\",\n url: \"#\",\n },\n {\n title: \"Tutorials\",\n url: \"#\",\n },\n {\n title: \"Changelog\",\n url: \"#\",\n },\n ],\n },\n {\n title: \"Settings\",\n url: \"#\",\n icon: Settings2,\n items: [\n {\n title: \"General\",\n url: \"#\",\n },\n {\n title: \"Team\",\n url: \"#\",\n },\n {\n title: \"Billing\",\n url: \"#\",\n },\n {\n title: \"Limits\",\n url: \"#\",\n },\n ],\n },\n ],\n projects: [\n {\n name: \"Design Engineering\",\n url: \"#\",\n icon: Frame,\n },\n {\n name: \"Sales & Marketing\",\n url: \"#\",\n icon: PieChart,\n },\n {\n name: \"Travel\",\n url: \"#\",\n icon: Map,\n },\n ],\n}\n\nexport function AppSidebar({ ...props }: React.ComponentProps) {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/component-wrapper.tsx", "content": "import { cn } from \"@/registry/default/lib/utils\"\n\nexport function ComponentWrapper({\n className,\n name,\n children,\n ...props\n}: React.ComponentPropsWithoutRef<\"div\"> & { name: string }) {\n return (\n \n
\n
{name}
\n
\n
div]:max-w-full\">\n {children}\n
\n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/nav-main.tsx", "content": "\"use client\"\n\nimport { ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport {\n Collapsible,\n CollapsibleContent,\n CollapsibleTrigger,\n} from \"@/registry/default/ui/collapsible\"\nimport {\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavMain({\n items,\n}: {\n items: {\n title: string\n url: string\n icon?: LucideIcon\n isActive?: boolean\n items?: {\n title: string\n url: string\n }[]\n }[]\n}) {\n return (\n \n Platform\n \n {items.map((item) => (\n \n \n \n \n {item.icon && }\n {item.title}\n \n \n \n \n \n {item.items?.map((subItem) => (\n \n \n \n {subItem.title}\n \n \n \n ))}\n \n \n \n \n ))}\n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/nav-projects.tsx", "content": "\"use client\"\n\nimport {\n Folder,\n Forward,\n MoreHorizontal,\n Trash2,\n type LucideIcon,\n} from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n SidebarGroup,\n SidebarGroupLabel,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavProjects({\n projects,\n}: {\n projects: {\n name: string\n url: string\n icon: LucideIcon\n }[]\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n Projects\n \n {projects.map((item) => (\n \n \n \n \n {item.name}\n \n \n \n \n \n \n More\n \n \n \n \n \n View Project\n \n \n \n Share Project\n \n \n \n \n Delete Project\n \n \n \n \n ))}\n \n \n \n More\n \n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/nav-user.tsx", "content": "\"use client\"\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/team-switcher.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronsUpDown, Plus } from \"lucide-react\"\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/default/ui/sidebar\"\n\nexport function TeamSwitcher({\n teams,\n}: {\n teams: {\n name: string\n logo: React.ElementType\n plan: string\n }[]\n}) {\n const { isMobile } = useSidebar()\n const [activeTeam, setActiveTeam] = React.useState(teams[0])\n\n if (!activeTeam) {\n return null\n }\n\n return (\n \n \n \n \n \n
\n \n
\n
\n \n {activeTeam.name}\n \n {activeTeam.plan}\n
\n \n \n \n \n \n Teams\n \n {teams.map((team, index) => (\n setActiveTeam(team)}\n className=\"gap-2 p-2\"\n >\n
\n \n
\n {team.name}\n ⌘{index + 1}\n \n ))}\n \n \n
\n \n
\n
Add team
\n \n \n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/accordion-demo.tsx", "content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/registry/default/ui/accordion\"\n\nexport function AccordionDemo() {\n return (\n \n \n Is it accessible?\n \n Yes. It adheres to the WAI-ARIA design pattern.\n \n \n \n Is it styled?\n \n Yes. It comes with default styles that matches the other\n components' aesthetic.\n \n \n \n Is it animated?\n \n Yes. It's animated by default, but you can disable it if you prefer.\n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/alert-demo.tsx", "content": "import { Terminal } from \"lucide-react\"\n\nimport {\n Alert,\n AlertDescription,\n AlertTitle,\n} from \"@/registry/default/ui/alert\"\n\nexport function AlertDemo() {\n return (\n \n \n Heads up!\n \n You can add components to your app using the cli.\n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/alert-dialog-demo.tsx", "content": "import {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogTitle,\n AlertDialogTrigger,\n} from \"@/registry/default/ui/alert-dialog\"\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport function AlertDialogDemo() {\n return (\n \n \n \n \n \n \n Are you absolutely sure?\n \n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n \n \n \n Cancel\n Continue\n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/aspect-ratio-demo.tsx", "content": "import Image from \"next/image\"\n\nimport { AspectRatio } from \"@/registry/default/ui/aspect-ratio\"\n\nexport function AspectRatioDemo() {\n return (\n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/avatar-demo.tsx", "content": "import {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/default/ui/avatar\"\n\nexport function AvatarDemo() {\n return (\n \n \n CN\n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/badge-demo.tsx", "content": "import { Badge } from \"@/registry/default/ui/badge\"\n\nexport function BadgeDemo() {\n return Badge\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/breadcrumb-demo.tsx", "content": "import {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/default/ui/breadcrumb\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport function BreadcrumbDemo() {\n return (\n \n \n \n Home\n \n \n \n \n \n \n Toggle menu\n \n \n Documentation\n Themes\n GitHub\n \n \n \n \n \n Components\n \n \n \n Breadcrumb\n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/button-demo.tsx", "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonDemo() {\n return \n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/calendar-demo.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Calendar } from \"@/registry/default/ui/calendar\"\n\nexport function CalendarDemo() {\n const [date, setDate] = React.useState(new Date())\n\n return (\n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/card-demo.tsx", "content": "import { BellRing, Check } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Switch } from \"@/registry/default/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\n\nexport function CardDemo({ className, ...props }: CardProps) {\n return (\n \n \n Notifications\n You have 3 unread messages.\n \n \n
\n \n
\n

\n Push Notifications\n

\n

\n Send notifications to device.\n

\n
\n \n
\n
\n {notifications.map((notification, index) => (\n \n \n
\n

\n {notification.title}\n

\n

\n {notification.description}\n

\n
\n
\n ))}\n \n \n \n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/carousel-demo.tsx", "content": "import * as React from \"react\"\n\nimport { Card, CardContent } from \"@/registry/default/ui/card\"\nimport {\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselNext,\n CarouselPrevious,\n} from \"@/registry/default/ui/carousel\"\n\nexport function CarouselDemo() {\n return (\n \n \n {Array.from({ length: 5 }).map((_, index) => (\n \n
\n \n \n {index + 1}\n \n \n
\n \n ))}\n \n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/checkbox-demo.tsx", "content": "\"use client\"\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\"\n\nexport function CheckboxDemo() {\n return (\n
\n \n \n Accept terms and conditions\n \n
\n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/collapsible-demo.tsx", "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 function CollapsibleDemo() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n \n
\n

\n @peduarte starred 3 repositories\n

\n \n \n \n
\n
\n @radix-ui/primitives\n
\n \n
\n @radix-ui/colors\n
\n
\n @stitches/react\n
\n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/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 function ComboboxDemo() {\n const [open, setOpen] = React.useState(false)\n const [value, setValue] = React.useState(\"\")\n\n return (\n \n \n \n {value\n ? frameworks.find((framework) => framework.value === value)?.label\n : \"Select framework...\"}\n \n \n \n \n \n \n \n No framework found.\n \n {frameworks.map((framework) => (\n {\n setValue(currentValue === value ? \"\" : currentValue)\n setOpen(false)\n }}\n >\n {framework.label}\n \n \n ))}\n \n \n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/command-demo.tsx", "content": "import {\n Calculator,\n Calendar,\n CreditCard,\n Settings,\n Smile,\n User,\n} from \"lucide-react\"\n\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n} from \"@/registry/default/ui/command\"\n\nexport function CommandDemo() {\n return (\n \n \n \n No results found.\n \n \n \n Calendar\n \n \n \n Search Emoji\n \n \n \n Calculator\n \n \n \n \n \n \n Profile\n ⌘P\n \n \n \n Billing\n ⌘B\n \n \n \n Settings\n ⌘S\n \n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/context-menu-demo.tsx", "content": "import {\n ContextMenu,\n ContextMenuCheckboxItem,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuLabel,\n ContextMenuRadioGroup,\n ContextMenuRadioItem,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuTrigger,\n} from \"@/registry/default/ui/context-menu\"\n\nexport function ContextMenuDemo() {\n return (\n \n \n Right click here\n \n \n \n Back\n ⌘[\n \n \n Forward\n ⌘]\n \n \n Reload\n ⌘R\n \n \n More Tools\n \n \n Save Page As...\n ⇧⌘S\n \n Create Shortcut...\n Name Window...\n \n Developer Tools\n \n \n \n \n Show Bookmarks Bar\n ⌘⇧B\n \n Show Full URLs\n \n \n People\n \n \n Pedro Duarte\n \n Colm Tuite\n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/date-picker-demo.tsx", "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 function DatePickerDemo() {\n const [date, setDate] = React.useState()\n\n return (\n \n \n \n \n {date ? format(date, \"PPP\") : Pick a date}\n \n \n \n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/dialog-demo.tsx", "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n Dialog,\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 function DialogDemo() {\n return (\n \n \n \n \n \n \n Edit profile\n \n Make changes to your profile here. Click save when you're done.\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/drawer-demo.tsx", "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 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 \n \n \n \n \n
\n \n Move Goal\n Set your daily activity goal.\n \n
\n
\n onClick(-10)}\n disabled={goal <= 200}\n >\n \n Decrease\n \n
\n
\n {goal}\n
\n
\n Calories/day\n
\n
\n onClick(10)}\n disabled={goal >= 400}\n >\n \n Increase\n \n
\n
\n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/dropdown-menu-demo.tsx", "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuPortal,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/default/ui/dropdown-menu\"\n\nexport function DropdownMenuDemo() {\n return (\n \n \n \n \n \n My Account\n \n \n \n Profile\n ⇧⌘P\n \n \n Billing\n ⌘B\n \n \n Settings\n ⌘S\n \n \n Keyboard shortcuts\n ⌘K\n \n \n \n \n Team\n \n Invite users\n \n \n Email\n Message\n \n More...\n \n \n \n \n New Team\n ⌘+T\n \n \n \n GitHub\n Support\n API\n \n \n Log out\n ⇧⌘Q\n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/hover-card-demo.tsx", "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/default/ui/avatar\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n HoverCard,\n HoverCardContent,\n HoverCardTrigger,\n} from \"@/registry/default/ui/hover-card\"\n\nexport function HoverCardDemo() {\n return (\n \n \n \n \n \n
\n \n \n VC\n \n
\n

@nextjs

\n

\n The React Framework – created and maintained by @vercel.\n

\n
\n {\" \"}\n \n Joined December 2021\n \n
\n
\n
\n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/input-demo.tsx", "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport function InputDemo() {\n return \n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/input-otp-demo.tsx", "content": "import {\n InputOTP,\n InputOTPGroup,\n InputOTPSeparator,\n InputOTPSlot,\n} from \"@/registry/default/ui/input-otp\"\n\nexport function InputOTPDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/label-demo.tsx", "content": "import { Checkbox } from \"@/registry/default/ui/checkbox\"\nimport { Label } from \"@/registry/default/ui/label\"\n\nexport function LabelDemo() {\n return (\n
\n
\n \n \n
\n
\n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/menubar-demo.tsx", "content": "import {\n Menubar,\n MenubarCheckboxItem,\n MenubarContent,\n MenubarItem,\n MenubarMenu,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarSeparator,\n MenubarShortcut,\n MenubarSub,\n MenubarSubContent,\n MenubarSubTrigger,\n MenubarTrigger,\n} from \"@/registry/default/ui/menubar\"\n\nexport function MenubarDemo() {\n return (\n \n \n File\n \n \n New Tab ⌘T\n \n \n New Window ⌘N\n \n New Incognito Window\n \n \n Share\n \n Email link\n Messages\n Notes\n \n \n \n \n Print... ⌘P\n \n \n \n \n Edit\n \n \n Undo ⌘Z\n \n \n Redo ⇧⌘Z\n \n \n \n Find\n \n Search the web\n \n Find...\n Find Next\n Find Previous\n \n \n \n Cut\n Copy\n Paste\n \n \n \n View\n \n Always Show Bookmarks Bar\n \n Always Show Full URLs\n \n \n \n Reload ⌘R\n \n \n Force Reload ⇧⌘R\n \n \n Toggle Fullscreen\n \n Hide Sidebar\n \n \n \n Profiles\n \n \n Andy\n Benoit\n Luis\n \n \n Edit...\n \n Add Profile...\n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/navigation-menu-demo.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n NavigationMenu,\n NavigationMenuContent,\n NavigationMenuItem,\n NavigationMenuLink,\n NavigationMenuList,\n NavigationMenuTrigger,\n navigationMenuTriggerStyle,\n} from \"@/registry/default/ui/navigation-menu\"\n\nconst components: { title: string; href: string; description: string }[] = [\n {\n title: \"Alert Dialog\",\n href: \"/docs/primitives/alert-dialog\",\n description:\n \"A modal dialog that interrupts the user with important content and expects a response.\",\n },\n {\n title: \"Hover Card\",\n href: \"/docs/primitives/hover-card\",\n description:\n \"For sighted users to preview content available behind a link.\",\n },\n {\n title: \"Progress\",\n href: \"/docs/primitives/progress\",\n description:\n \"Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.\",\n },\n {\n title: \"Scroll-area\",\n href: \"/docs/primitives/scroll-area\",\n description: \"Visually or semantically separates content.\",\n },\n {\n title: \"Tabs\",\n href: \"/docs/primitives/tabs\",\n description:\n \"A set of layered sections of content—known as tab panels—that are displayed one at a time.\",\n },\n {\n title: \"Tooltip\",\n href: \"/docs/primitives/tooltip\",\n description:\n \"A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.\",\n },\n]\n\nexport function NavigationMenuDemo() {\n return (\n \n \n \n Getting started\n \n
    \n
  • \n \n \n
    \n shadcn/ui\n
    \n

    \n Beautifully designed components built with Radix UI and\n Tailwind CSS.\n

    \n \n     \n
    • \n \n Re-usable components built using Radix UI and Tailwind CSS.\n \n \n How to install dependencies and structure your app.\n \n \n Styles for headings, paragraphs, lists...etc\n \n
\n \n \n \n Components\n \n
    \n {components.map((component) => (\n \n {component.description}\n \n ))}\n
\n \n \n \n \n \n Documentation\n \n \n \n \n \n )\n}\n\nconst ListItem = React.forwardRef<\n React.ElementRef<\"a\">,\n React.ComponentPropsWithoutRef<\"a\">\n>(({ className, title, children, ...props }, ref) => {\n return (\n
  • \n \n \n
    {title}
    \n

    \n {children}\n

    \n \n     \n
    • \n )\n})\nListItem.displayName = \"ListItem\"\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/pagination-demo.tsx", "content": "import {\n Pagination,\n PaginationContent,\n PaginationEllipsis,\n PaginationItem,\n PaginationLink,\n PaginationNext,\n PaginationPrevious,\n} from \"@/registry/default/ui/pagination\"\n\nexport function PaginationDemo() {\n return (\n \n \n \n \n \n \n 1\n \n \n \n 2\n \n \n \n 3\n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/popover-demo.tsx", "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/default/ui/popover\"\n\nexport function PopoverDemo() {\n return (\n \n \n \n \n \n
    \n
    \n

    Dimensions

    \n

    \n Set the dimensions for the layer.\n

    \n
    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n     \n     \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/progress-demo.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Progress } from \"@/registry/default/ui/progress\"\n\nexport function ProgressDemo() {\n const [progress, setProgress] = React.useState(13)\n\n React.useEffect(() => {\n const timer = setTimeout(() => setProgress(66), 500)\n return () => clearTimeout(timer)\n }, [])\n\n return \n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/radio-group-demo.tsx", "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/default/ui/radio-group\"\n\nexport function RadioGroupDemo() {\n return (\n \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n     \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/resizable-handle.tsx", "content": "import {\n ResizableHandle,\n ResizablePanel,\n ResizablePanelGroup,\n} from \"@/registry/default/ui/resizable\"\n\nexport function ResizableHandleDemo() {\n return (\n \n \n
    \n Sidebar\n
    \n     \n \n \n
    \n Content\n
    \n     \n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/scroll-area-demo.tsx", "content": "import * as React from \"react\"\n\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\"\nimport { Separator } from \"@/registry/default/ui/separator\"\n\nconst tags = Array.from({ length: 50 }).map(\n (_, i, a) => `v1.2.0-beta.${a.length - i}`\n)\n\nexport function ScrollAreaDemo() {\n return (\n \n
    \n

    Tags

    \n {tags.map((tag) => (\n \n
    {tag}
    \n \n     \n ))}\n
    \n     \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/select-demo.tsx", "content": "import * as React from \"react\"\n\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport function SelectDemo() {\n return (\n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/separator-demo.tsx", "content": "import { Separator } from \"@/registry/default/ui/separator\"\n\nexport function SeparatorDemo() {\n return (\n
    \n
    \n

    Radix Primitives

    \n

    \n An open-source UI component library.\n

    \n
    \n \n
    \n
    Blog
    \n \n
    Docs
    \n \n
    Source
    \n
    \n
    \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/sheet-demo.tsx", "content": "import { Button } from \"@/registry/default/ui/button\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n SheetTrigger,\n} from \"@/registry/default/ui/sheet\"\n\nexport function SheetDemo() {\n return (\n \n \n \n \n \n \n Edit profile\n \n Make changes to your profile here. Click save when you're done.\n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n \n \n \n     \n     \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/skeleton-demo.tsx", "content": "import { Skeleton } from \"@/registry/default/ui/skeleton\"\n\nexport function SkeletonDemo() {\n return (\n
    \n \n
    \n \n \n
    \n
    \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/slider-demo.tsx", "content": "import { cn } from \"@/lib/utils\"\nimport { Slider } from \"@/registry/default/ui/slider\"\n\ntype SliderProps = React.ComponentProps\n\nexport function SliderDemo({ className, ...props }: SliderProps) {\n return (\n \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/sonner-demo.tsx", "content": "\"use client\"\n\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/registry/default/ui/button\"\n\nexport function SonnerDemo() {\n return (\n \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 \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/switch-demo.tsx", "content": "import { Label } from \"@/registry/default/ui/label\"\nimport { Switch } from \"@/registry/default/ui/switch\"\n\nexport function SwitchDemo() {\n return (\n
    \n \n \n
    \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/table-demo.tsx", "content": "import {\n Table,\n TableBody,\n TableCaption,\n TableCell,\n TableFooter,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/default/ui/table\"\n\nconst invoices = [\n {\n invoice: \"INV001\",\n paymentStatus: \"Paid\",\n totalAmount: \"$250.00\",\n paymentMethod: \"Credit Card\",\n },\n {\n invoice: \"INV002\",\n paymentStatus: \"Pending\",\n totalAmount: \"$150.00\",\n paymentMethod: \"PayPal\",\n },\n {\n invoice: \"INV003\",\n paymentStatus: \"Unpaid\",\n totalAmount: \"$350.00\",\n paymentMethod: \"Bank Transfer\",\n },\n {\n invoice: \"INV004\",\n paymentStatus: \"Paid\",\n totalAmount: \"$450.00\",\n paymentMethod: \"Credit Card\",\n },\n {\n invoice: \"INV005\",\n paymentStatus: \"Paid\",\n totalAmount: \"$550.00\",\n paymentMethod: \"PayPal\",\n },\n {\n invoice: \"INV006\",\n paymentStatus: \"Pending\",\n totalAmount: \"$200.00\",\n paymentMethod: \"Bank Transfer\",\n },\n {\n invoice: \"INV007\",\n paymentStatus: \"Unpaid\",\n totalAmount: \"$300.00\",\n paymentMethod: \"Credit Card\",\n },\n]\n\nexport function TableDemo() {\n return (\n \n A list of your recent invoices.\n \n \n Invoice\n Status\n Method\n Amount\n \n \n \n {invoices.map((invoice) => (\n \n {invoice.invoice}\n {invoice.paymentStatus}\n {invoice.paymentMethod}\n {invoice.totalAmount}\n \n ))}\n \n \n \n Total\n $2,500.00\n \n \n
    \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/tabs-demo.tsx", "content": "import { Button } from \"@/registry/default/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/default/ui/tabs\"\n\nexport function TabsDemo() {\n return (\n \n \n Account\n Password\n \n \n \n \n Account\n \n Make changes to your account here. Click save when you're done.\n \n \n \n
    \n \n \n
    \n
    \n \n \n
    \n     \n \n \n \n     \n     \n \n \n \n Password\n \n Change your password here. After saving, you'll be logged out.\n \n \n \n
    \n \n \n
    \n
    \n \n \n
    \n     \n \n \n \n     \n     \n     \n )\n}\n", "type": "registry:component", "target": "" }, { "path": "internal/sink/components/textarea-demo.tsx", "content": "import { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport function TextareaDemo() {\n return