From 3ba71faf8503075bea6f7ab60edef44ca3e1db4b Mon Sep 17 00:00:00 2001 From: shadcn Date: Mon, 28 Oct 2024 12:25:19 +0400 Subject: [PATCH 01/16] feat: move new-york to lucide-react --- .../registry/default/example/button-icon.tsx | 2 +- .../default/example/button-loading.tsx | 2 +- .../default/example/cards/activity-goal.tsx | 4 +-- .../default/example/cards/data-table.tsx | 12 +++----- .../default/example/cards/team-members.tsx | 11 +++---- .../default/example/collapsible-demo.tsx | 2 +- .../default/example/combobox-demo.tsx | 6 ++-- .../default/example/combobox-form.tsx | 4 +-- .../default/example/data-table-demo.tsx | 6 ++-- .../default/example/date-picker-demo.tsx | 2 +- .../default/example/dialog-close-button.tsx | 2 +- .../registry/default/example/drawer-demo.tsx | 4 +-- .../registry/new-york/example/alert-demo.tsx | 4 +-- .../new-york/example/alert-destructive.tsx | 4 +-- .../new-york/example/breadcrumb-dropdown.tsx | 8 ++--- .../new-york/example/breadcrumb-separator.tsx | 6 ++-- .../registry/new-york/example/button-icon.tsx | 4 +-- .../new-york/example/button-loading.tsx | 4 +-- .../new-york/example/button-with-icon.tsx | 4 +-- .../new-york/example/calendar-form.tsx | 2 +- .../registry/new-york/example/card-demo.tsx | 6 ++-- .../new-york/example/cards/activity-goal.tsx | 6 ++-- .../registry/new-york/example/cards/chat.tsx | 8 ++--- .../new-york/example/cards/data-table.tsx | 12 +++----- .../new-york/example/cards/team-members.tsx | 11 +++---- .../new-york/example/collapsible-demo.tsx | 4 +-- .../new-york/example/combobox-demo.tsx | 8 ++--- .../example/combobox-dropdown-menu.tsx | 4 +-- .../new-york/example/combobox-form.tsx | 8 ++--- .../new-york/example/command-demo.tsx | 30 +++++++++---------- .../new-york/example/command-dialog.tsx | 30 +++++++++---------- .../new-york/example/data-table-demo.tsx | 12 +++----- .../new-york/example/date-picker-demo.tsx | 2 +- .../new-york/example/date-picker-form.tsx | 2 +- .../example/date-picker-with-presets.tsx | 2 +- .../example/date-picker-with-range.tsx | 2 +- .../new-york/example/dialog-close-button.tsx | 4 +-- .../registry/new-york/example/drawer-demo.tsx | 6 ++-- .../new-york/example/hover-card-demo.tsx | 2 +- .../registry/new-york/example/mode-toggle.tsx | 6 ++-- .../registry/new-york/example/toggle-demo.tsx | 4 +-- .../new-york/example/toggle-disabled.tsx | 4 +-- .../new-york/example/toggle-group-demo.tsx | 12 +++----- .../example/toggle-group-disabled.tsx | 12 +++----- .../new-york/example/toggle-group-lg.tsx | 12 +++----- .../new-york/example/toggle-group-outline.tsx | 12 +++----- .../new-york/example/toggle-group-single.tsx | 12 +++----- .../new-york/example/toggle-group-sm.tsx | 12 +++----- .../registry/new-york/example/toggle-lg.tsx | 4 +-- .../new-york/example/toggle-outline.tsx | 4 +-- .../registry/new-york/example/toggle-sm.tsx | 4 +-- .../new-york/example/toggle-with-text.tsx | 4 +-- apps/www/registry/new-york/ui/accordion.tsx | 4 +-- apps/www/registry/new-york/ui/breadcrumb.tsx | 6 ++-- apps/www/registry/new-york/ui/calendar.tsx | 6 ++-- apps/www/registry/new-york/ui/carousel.tsx | 6 ++-- apps/www/registry/new-york/ui/checkbox.tsx | 4 +-- apps/www/registry/new-york/ui/command.tsx | 4 +-- .../www/registry/new-york/ui/context-menu.tsx | 12 +++----- apps/www/registry/new-york/ui/dialog.tsx | 4 +-- .../registry/new-york/ui/dropdown-menu.tsx | 12 +++----- apps/www/registry/new-york/ui/input-otp.tsx | 4 +-- apps/www/registry/new-york/ui/menubar.tsx | 12 +++----- .../registry/new-york/ui/navigation-menu.tsx | 4 +-- apps/www/registry/new-york/ui/pagination.tsx | 12 +++----- apps/www/registry/new-york/ui/radio-group.tsx | 4 +-- apps/www/registry/new-york/ui/resizable.tsx | 4 +-- apps/www/registry/new-york/ui/select.tsx | 15 ++++------ apps/www/registry/new-york/ui/sheet.tsx | 4 +-- apps/www/registry/new-york/ui/toast.tsx | 4 +-- 70 files changed, 206 insertions(+), 269 deletions(-) diff --git a/apps/www/registry/default/example/button-icon.tsx b/apps/www/registry/default/example/button-icon.tsx index 1e790f85d4f..6b7a115d050 100644 --- a/apps/www/registry/default/example/button-icon.tsx +++ b/apps/www/registry/default/example/button-icon.tsx @@ -5,7 +5,7 @@ import { Button } from "@/registry/default/ui/button" export default function ButtonIcon() { return ( ) } diff --git a/apps/www/registry/default/example/button-loading.tsx b/apps/www/registry/default/example/button-loading.tsx index bdce9478b02..7d459f01309 100644 --- a/apps/www/registry/default/example/button-loading.tsx +++ b/apps/www/registry/default/example/button-loading.tsx @@ -5,7 +5,7 @@ import { Button } from "@/registry/default/ui/button" export default function ButtonLoading() { return ( ) diff --git a/apps/www/registry/default/example/cards/activity-goal.tsx b/apps/www/registry/default/example/cards/activity-goal.tsx index be73bb2f6a4..3fb1a209baf 100644 --- a/apps/www/registry/default/example/cards/activity-goal.tsx +++ b/apps/www/registry/default/example/cards/activity-goal.tsx @@ -87,7 +87,7 @@ export function CardsActivityGoal() { onClick={() => onClick(-10)} disabled={goal <= 200} > - + Decrease
@@ -103,7 +103,7 @@ export function CardsActivityGoal() { onClick={() => onClick(10)} disabled={goal >= 400} > - + Increase
diff --git a/apps/www/registry/default/example/cards/data-table.tsx b/apps/www/registry/default/example/cards/data-table.tsx index cf58e890a57..06461aa35b8 100644 --- a/apps/www/registry/default/example/cards/data-table.tsx +++ b/apps/www/registry/default/example/cards/data-table.tsx @@ -1,11 +1,6 @@ "use client" import * as React from "react" -import { - CaretSortIcon, - ChevronDownIcon, - DotsHorizontalIcon, -} from "@radix-ui/react-icons" import { ColumnDef, ColumnFiltersState, @@ -18,6 +13,7 @@ import { getSortedRowModel, useReactTable, } from "@tanstack/react-table" +import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react" import { Button } from "@/registry/default/ui/button" import { @@ -126,7 +122,7 @@ export const columns: ColumnDef[] = [ onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} > Email - + ) }, @@ -158,7 +154,7 @@ export const columns: ColumnDef[] = [ @@ -225,7 +221,7 @@ export function CardsDataTable() { diff --git a/apps/www/registry/default/example/cards/team-members.tsx b/apps/www/registry/default/example/cards/team-members.tsx index 38162425436..f9af98b95d6 100644 --- a/apps/www/registry/default/example/cards/team-members.tsx +++ b/apps/www/registry/default/example/cards/team-members.tsx @@ -1,6 +1,6 @@ "use client" -import { ChevronDownIcon } from "@radix-ui/react-icons" +import { ChevronDown } from "lucide-react" import { Avatar, @@ -53,8 +53,7 @@ export function CardsTeamMembers() { @@ -107,8 +106,7 @@ export function CardsTeamMembers() { @@ -163,8 +161,7 @@ export function CardsTeamMembers() { diff --git a/apps/www/registry/default/example/collapsible-demo.tsx b/apps/www/registry/default/example/collapsible-demo.tsx index 345d54adc67..043e0ef76a9 100644 --- a/apps/www/registry/default/example/collapsible-demo.tsx +++ b/apps/www/registry/default/example/collapsible-demo.tsx @@ -1,7 +1,7 @@ "use client" import * as React from "react" -import { ChevronsUpDown, Plus, X } from "lucide-react" +import { ChevronsUpDown } from "lucide-react" import { Button } from "@/registry/default/ui/button" import { diff --git a/apps/www/registry/default/example/combobox-demo.tsx b/apps/www/registry/default/example/combobox-demo.tsx index 7c988850e61..edc8fca6c32 100644 --- a/apps/www/registry/default/example/combobox-demo.tsx +++ b/apps/www/registry/default/example/combobox-demo.tsx @@ -58,7 +58,7 @@ export default function ComboboxDemo() { {value ? frameworks.find((framework) => framework.value === value)?.label : "Select framework..."} - + @@ -76,13 +76,13 @@ export default function ComboboxDemo() { setOpen(false) }} > + {framework.label} - {framework.label} ))} diff --git a/apps/www/registry/default/example/combobox-form.tsx b/apps/www/registry/default/example/combobox-form.tsx index c1cc6f03218..68216125361 100644 --- a/apps/www/registry/default/example/combobox-form.tsx +++ b/apps/www/registry/default/example/combobox-form.tsx @@ -108,15 +108,15 @@ export default function ComboboxForm() { form.setValue("language", language.value) }} > + {language.label} - {language.label} ))} diff --git a/apps/www/registry/default/example/data-table-demo.tsx b/apps/www/registry/default/example/data-table-demo.tsx index f5fd232617a..05ea35b1d6d 100644 --- a/apps/www/registry/default/example/data-table-demo.tsx +++ b/apps/www/registry/default/example/data-table-demo.tsx @@ -115,7 +115,7 @@ export const columns: ColumnDef[] = [ onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} > Email - + ) }, @@ -147,7 +147,7 @@ export const columns: ColumnDef[] = [ @@ -209,7 +209,7 @@ export default function DataTableDemo() { diff --git a/apps/www/registry/default/example/date-picker-demo.tsx b/apps/www/registry/default/example/date-picker-demo.tsx index 7599d9eabe3..ff787b11093 100644 --- a/apps/www/registry/default/example/date-picker-demo.tsx +++ b/apps/www/registry/default/example/date-picker-demo.tsx @@ -2,7 +2,7 @@ import * as React from "react" import { format } from "date-fns" -import { Calendar as CalendarIcon } from "lucide-react" +import { CalendarIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/registry/default/ui/button" diff --git a/apps/www/registry/default/example/dialog-close-button.tsx b/apps/www/registry/default/example/dialog-close-button.tsx index 826d0661328..b2f5726093d 100644 --- a/apps/www/registry/default/example/dialog-close-button.tsx +++ b/apps/www/registry/default/example/dialog-close-button.tsx @@ -40,7 +40,7 @@ export default function DialogCloseButton() { diff --git a/apps/www/registry/default/example/drawer-demo.tsx b/apps/www/registry/default/example/drawer-demo.tsx index 2c2038474f2..9ff4299d5d2 100644 --- a/apps/www/registry/default/example/drawer-demo.tsx +++ b/apps/www/registry/default/example/drawer-demo.tsx @@ -83,7 +83,7 @@ export default function DrawerDemo() { onClick={() => onClick(-10)} disabled={goal <= 200} > - + Decrease
@@ -101,7 +101,7 @@ export default function DrawerDemo() { onClick={() => onClick(10)} disabled={goal >= 400} > - + Increase
diff --git a/apps/www/registry/new-york/example/alert-demo.tsx b/apps/www/registry/new-york/example/alert-demo.tsx index 78ae6282006..e345ee6609c 100644 --- a/apps/www/registry/new-york/example/alert-demo.tsx +++ b/apps/www/registry/new-york/example/alert-demo.tsx @@ -1,4 +1,4 @@ -import { RocketIcon } from "@radix-ui/react-icons" +import { Terminal } from "lucide-react" import { Alert, @@ -9,7 +9,7 @@ import { export default function AlertDemo() { return ( - + Heads up! You can add components to your app using the cli. diff --git a/apps/www/registry/new-york/example/alert-destructive.tsx b/apps/www/registry/new-york/example/alert-destructive.tsx index f09ba842e74..cb92ddaf6cd 100644 --- a/apps/www/registry/new-york/example/alert-destructive.tsx +++ b/apps/www/registry/new-york/example/alert-destructive.tsx @@ -1,4 +1,4 @@ -import { ExclamationTriangleIcon } from "@radix-ui/react-icons" +import { AlertCircle } from "lucide-react" import { Alert, @@ -9,7 +9,7 @@ import { export default function AlertDestructive() { return ( - + Error Your session has expired. Please log in again. diff --git a/apps/www/registry/new-york/example/breadcrumb-dropdown.tsx b/apps/www/registry/new-york/example/breadcrumb-dropdown.tsx index e1114e8370c..4bb35a16652 100644 --- a/apps/www/registry/new-york/example/breadcrumb-dropdown.tsx +++ b/apps/www/registry/new-york/example/breadcrumb-dropdown.tsx @@ -1,4 +1,4 @@ -import { ChevronDownIcon, SlashIcon } from "@radix-ui/react-icons" +import { ChevronDown, Slash } from "lucide-react" import { Breadcrumb, @@ -23,13 +23,13 @@ export default function BreadcrumbWithDropdown() { Home - + Components - + Documentation @@ -39,7 +39,7 @@ export default function BreadcrumbWithDropdown() { - + Breadcrumb diff --git a/apps/www/registry/new-york/example/breadcrumb-separator.tsx b/apps/www/registry/new-york/example/breadcrumb-separator.tsx index 0e5fcb3dcc6..9833dd7c4d7 100644 --- a/apps/www/registry/new-york/example/breadcrumb-separator.tsx +++ b/apps/www/registry/new-york/example/breadcrumb-separator.tsx @@ -1,4 +1,4 @@ -import { SlashIcon } from "@radix-ui/react-icons" +import { Slash } from "lucide-react" import { Breadcrumb, @@ -17,13 +17,13 @@ export default function BreadcrumbWithCustomSeparator() { Home - + Components - + Breadcrumb diff --git a/apps/www/registry/new-york/example/button-icon.tsx b/apps/www/registry/new-york/example/button-icon.tsx index 1478a4830f3..8cc643cfafc 100644 --- a/apps/www/registry/new-york/example/button-icon.tsx +++ b/apps/www/registry/new-york/example/button-icon.tsx @@ -1,11 +1,11 @@ -import { ChevronRightIcon } from "@radix-ui/react-icons" +import { ChevronRight } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" export default function ButtonIcon() { return ( ) } diff --git a/apps/www/registry/new-york/example/button-loading.tsx b/apps/www/registry/new-york/example/button-loading.tsx index df0ca032d49..fcb51a3b6a5 100644 --- a/apps/www/registry/new-york/example/button-loading.tsx +++ b/apps/www/registry/new-york/example/button-loading.tsx @@ -1,11 +1,11 @@ -import { ReloadIcon } from "@radix-ui/react-icons" +import { Loader2 } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" export default function ButtonLoading() { return ( ) diff --git a/apps/www/registry/new-york/example/button-with-icon.tsx b/apps/www/registry/new-york/example/button-with-icon.tsx index 2da1bcf3394..1026bf2a11c 100644 --- a/apps/www/registry/new-york/example/button-with-icon.tsx +++ b/apps/www/registry/new-york/example/button-with-icon.tsx @@ -1,11 +1,11 @@ -import { EnvelopeOpenIcon } from "@radix-ui/react-icons" +import { Mail } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" export default function ButtonWithIcon() { return ( ) } diff --git a/apps/www/registry/new-york/example/calendar-form.tsx b/apps/www/registry/new-york/example/calendar-form.tsx index 0e71d498ad2..03a86465d0f 100644 --- a/apps/www/registry/new-york/example/calendar-form.tsx +++ b/apps/www/registry/new-york/example/calendar-form.tsx @@ -1,8 +1,8 @@ "use client" import { zodResolver } from "@hookform/resolvers/zod" -import { CalendarIcon } from "@radix-ui/react-icons" import { format } from "date-fns" +import { CalendarIcon } from "lucide-react" import { useForm } from "react-hook-form" import { z } from "zod" diff --git a/apps/www/registry/new-york/example/card-demo.tsx b/apps/www/registry/new-york/example/card-demo.tsx index 82d2363738f..3878ab475f5 100644 --- a/apps/www/registry/new-york/example/card-demo.tsx +++ b/apps/www/registry/new-york/example/card-demo.tsx @@ -1,4 +1,4 @@ -import { BellIcon, CheckIcon } from "@radix-ui/react-icons" +import { BellRing, Check } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/registry/new-york/ui/button" @@ -38,7 +38,7 @@ export default function CardDemo({ className, ...props }: CardProps) {
- +

Push Notifications @@ -70,7 +70,7 @@ export default function CardDemo({ className, ...props }: CardProps) { diff --git a/apps/www/registry/new-york/example/cards/activity-goal.tsx b/apps/www/registry/new-york/example/cards/activity-goal.tsx index 80edf156417..fef86504bc7 100644 --- a/apps/www/registry/new-york/example/cards/activity-goal.tsx +++ b/apps/www/registry/new-york/example/cards/activity-goal.tsx @@ -1,7 +1,7 @@ "use client" import * as React from "react" -import { MinusIcon, PlusIcon } from "@radix-ui/react-icons" +import { Minus, Plus } from "lucide-react" import { useTheme } from "next-themes" import { Bar, BarChart, ResponsiveContainer } from "recharts" @@ -87,7 +87,7 @@ export function CardsActivityGoal() { onClick={() => onClick(-10)} disabled={goal <= 200} > - + Decrease

@@ -103,7 +103,7 @@ export function CardsActivityGoal() { onClick={() => onClick(10)} disabled={goal >= 400} > - + Increase
diff --git a/apps/www/registry/new-york/example/cards/chat.tsx b/apps/www/registry/new-york/example/cards/chat.tsx index ccb8f596ae3..ecb777bdefd 100644 --- a/apps/www/registry/new-york/example/cards/chat.tsx +++ b/apps/www/registry/new-york/example/cards/chat.tsx @@ -1,5 +1,5 @@ import * as React from "react" -import { CheckIcon, PaperPlaneIcon, PlusIcon } from "@radix-ui/react-icons" +import { Check, Plus, Send } from "lucide-react" import { cn } from "@/lib/utils" import { @@ -116,7 +116,7 @@ export function CardsChat() { className="ml-auto rounded-full" onClick={() => setOpen(true)} > - + New message @@ -166,7 +166,7 @@ export function CardsChat() { onChange={(event) => setInput(event.target.value)} /> @@ -219,7 +219,7 @@ export function CardsChat() {

{selectedUsers.includes(user) ? ( - + ) : null} ))} diff --git a/apps/www/registry/new-york/example/cards/data-table.tsx b/apps/www/registry/new-york/example/cards/data-table.tsx index 46606ce769f..114a280a413 100644 --- a/apps/www/registry/new-york/example/cards/data-table.tsx +++ b/apps/www/registry/new-york/example/cards/data-table.tsx @@ -1,11 +1,6 @@ "use client" import * as React from "react" -import { - CaretSortIcon, - ChevronDownIcon, - DotsHorizontalIcon, -} from "@radix-ui/react-icons" import { ColumnDef, ColumnFiltersState, @@ -18,6 +13,7 @@ import { getSortedRowModel, useReactTable, } from "@tanstack/react-table" +import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" import { @@ -126,7 +122,7 @@ export const columns: ColumnDef[] = [ onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} > Email - + ) }, @@ -158,7 +154,7 @@ export const columns: ColumnDef[] = [ @@ -225,7 +221,7 @@ export function CardsDataTable() { diff --git a/apps/www/registry/new-york/example/cards/team-members.tsx b/apps/www/registry/new-york/example/cards/team-members.tsx index d754034fe8e..fc834a21040 100644 --- a/apps/www/registry/new-york/example/cards/team-members.tsx +++ b/apps/www/registry/new-york/example/cards/team-members.tsx @@ -1,6 +1,6 @@ "use client" -import { ChevronDownIcon } from "@radix-ui/react-icons" +import { ChevronDown } from "lucide-react" import { Avatar, @@ -53,8 +53,7 @@ export function CardsTeamMembers() { @@ -107,8 +106,7 @@ export function CardsTeamMembers() { @@ -163,8 +161,7 @@ export function CardsTeamMembers() { diff --git a/apps/www/registry/new-york/example/collapsible-demo.tsx b/apps/www/registry/new-york/example/collapsible-demo.tsx index b1210ea41c8..98e8bcc5bab 100644 --- a/apps/www/registry/new-york/example/collapsible-demo.tsx +++ b/apps/www/registry/new-york/example/collapsible-demo.tsx @@ -1,7 +1,7 @@ "use client" import * as React from "react" -import { CaretSortIcon } from "@radix-ui/react-icons" +import { ChevronsUpDown } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" import { @@ -25,7 +25,7 @@ export default function CollapsibleDemo() { diff --git a/apps/www/registry/new-york/example/combobox-demo.tsx b/apps/www/registry/new-york/example/combobox-demo.tsx index 86ca85984c8..08a3048752e 100644 --- a/apps/www/registry/new-york/example/combobox-demo.tsx +++ b/apps/www/registry/new-york/example/combobox-demo.tsx @@ -1,7 +1,7 @@ "use client" import * as React from "react" -import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons" +import { Check, ChevronsUpDown } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/registry/new-york/ui/button" @@ -58,7 +58,7 @@ export default function ComboboxDemo() { {value ? frameworks.find((framework) => framework.value === value)?.label : "Select framework..."} - + @@ -77,9 +77,9 @@ export default function ComboboxDemo() { }} > {framework.label} - diff --git a/apps/www/registry/new-york/example/combobox-dropdown-menu.tsx b/apps/www/registry/new-york/example/combobox-dropdown-menu.tsx index c27d219e92b..653d3736ece 100644 --- a/apps/www/registry/new-york/example/combobox-dropdown-menu.tsx +++ b/apps/www/registry/new-york/example/combobox-dropdown-menu.tsx @@ -1,7 +1,7 @@ "use client" import * as React from "react" -import { DotsHorizontalIcon } from "@radix-ui/react-icons" +import { MoreHorizontal } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" import { @@ -51,7 +51,7 @@ export default function ComboboxDropdownMenu() { diff --git a/apps/www/registry/new-york/example/combobox-form.tsx b/apps/www/registry/new-york/example/combobox-form.tsx index 2508c0c9b61..c8fae2cd99d 100644 --- a/apps/www/registry/new-york/example/combobox-form.tsx +++ b/apps/www/registry/new-york/example/combobox-form.tsx @@ -1,7 +1,7 @@ "use client" import { zodResolver } from "@hookform/resolvers/zod" -import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons" +import { Check, ChevronsUpDown } from "lucide-react" import { useForm } from "react-hook-form" import { z } from "zod" @@ -90,7 +90,7 @@ export default function ComboboxForm() { (language) => language.value === field.value )?.label : "Select language"} - + @@ -112,9 +112,9 @@ export default function ComboboxForm() { }} > {language.label} - No results found. - + Calendar - + Search Emoji - - Launch + + Calculator - + Profile ⌘P - - Mail + + Billing ⌘B - + Settings ⌘S diff --git a/apps/www/registry/new-york/example/command-dialog.tsx b/apps/www/registry/new-york/example/command-dialog.tsx index 6589e9b0741..65058d45023 100644 --- a/apps/www/registry/new-york/example/command-dialog.tsx +++ b/apps/www/registry/new-york/example/command-dialog.tsx @@ -2,13 +2,13 @@ import * as React from "react" import { - CalendarIcon, - EnvelopeClosedIcon, - FaceIcon, - GearIcon, - PersonIcon, - RocketIcon, -} from "@radix-ui/react-icons" + Calculator, + Calendar, + CreditCard, + Settings, + Smile, + User, +} from "lucide-react" import { CommandDialog, @@ -50,32 +50,32 @@ export default function CommandDialogDemo() { No results found. - + Calendar - + Search Emoji - - Launch + + Calculator - + Profile ⌘P - - Mail + + Billing ⌘B - + Settings ⌘S diff --git a/apps/www/registry/new-york/example/data-table-demo.tsx b/apps/www/registry/new-york/example/data-table-demo.tsx index ddb26e881c5..fb8f1fe7ee5 100644 --- a/apps/www/registry/new-york/example/data-table-demo.tsx +++ b/apps/www/registry/new-york/example/data-table-demo.tsx @@ -1,11 +1,6 @@ "use client" import * as React from "react" -import { - CaretSortIcon, - ChevronDownIcon, - DotsHorizontalIcon, -} from "@radix-ui/react-icons" import { ColumnDef, ColumnFiltersState, @@ -18,6 +13,7 @@ import { getSortedRowModel, useReactTable, } from "@tanstack/react-table" +import { ArrowUpDown, ChevronDown, MoreHorizontal } from "lucide-react" import { Button } from "@/registry/new-york/ui/button" import { Checkbox } from "@/registry/new-york/ui/checkbox" @@ -119,7 +115,7 @@ export const columns: ColumnDef[] = [ onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} > Email - + ) }, @@ -151,7 +147,7 @@ export const columns: ColumnDef[] = [ @@ -213,7 +209,7 @@ export default function DataTableDemo() { diff --git a/apps/www/registry/new-york/example/date-picker-demo.tsx b/apps/www/registry/new-york/example/date-picker-demo.tsx index aa68df8f481..670e819bb15 100644 --- a/apps/www/registry/new-york/example/date-picker-demo.tsx +++ b/apps/www/registry/new-york/example/date-picker-demo.tsx @@ -1,8 +1,8 @@ "use client" import * as React from "react" -import { CalendarIcon } from "@radix-ui/react-icons" import { format } from "date-fns" +import { CalendarIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/registry/new-york/ui/button" diff --git a/apps/www/registry/new-york/example/date-picker-form.tsx b/apps/www/registry/new-york/example/date-picker-form.tsx index 31e45a7eea8..bbd91f28586 100644 --- a/apps/www/registry/new-york/example/date-picker-form.tsx +++ b/apps/www/registry/new-york/example/date-picker-form.tsx @@ -1,8 +1,8 @@ "use client" import { zodResolver } from "@hookform/resolvers/zod" -import { CalendarIcon } from "@radix-ui/react-icons" import { format } from "date-fns" +import { CalendarIcon } from "lucide-react" import { useForm } from "react-hook-form" import { z } from "zod" diff --git a/apps/www/registry/new-york/example/date-picker-with-presets.tsx b/apps/www/registry/new-york/example/date-picker-with-presets.tsx index 07ed6b88e54..2c01b0a3650 100644 --- a/apps/www/registry/new-york/example/date-picker-with-presets.tsx +++ b/apps/www/registry/new-york/example/date-picker-with-presets.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 { cn } from "@/lib/utils" import { Button } from "@/registry/new-york/ui/button" diff --git a/apps/www/registry/new-york/example/date-picker-with-range.tsx b/apps/www/registry/new-york/example/date-picker-with-range.tsx index f7f51c62567..bf25e4970bb 100644 --- a/apps/www/registry/new-york/example/date-picker-with-range.tsx +++ b/apps/www/registry/new-york/example/date-picker-with-range.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" diff --git a/apps/www/registry/new-york/example/dialog-close-button.tsx b/apps/www/registry/new-york/example/dialog-close-button.tsx index 5724000f994..c28c418ae68 100644 --- a/apps/www/registry/new-york/example/dialog-close-button.tsx +++ b/apps/www/registry/new-york/example/dialog-close-button.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 { @@ -40,7 +40,7 @@ export default function DialogCloseButton() {
diff --git a/apps/www/registry/new-york/example/drawer-demo.tsx b/apps/www/registry/new-york/example/drawer-demo.tsx index 14a0c003847..44fdeedf785 100644 --- a/apps/www/registry/new-york/example/drawer-demo.tsx +++ b/apps/www/registry/new-york/example/drawer-demo.tsx @@ -1,5 +1,5 @@ import * as React from "react" -import { MinusIcon, PlusIcon } from "@radix-ui/react-icons" +import { Minus, Plus } from "lucide-react" import { Bar, BarChart, ResponsiveContainer } from "recharts" import { Button } from "@/registry/new-york/ui/button" @@ -83,7 +83,7 @@ export default function DrawerDemo() { onClick={() => onClick(-10)} disabled={goal <= 200} > - + Decrease
@@ -101,7 +101,7 @@ export default function DrawerDemo() { onClick={() => onClick(10)} disabled={goal >= 400} > - + Increase
diff --git a/apps/www/registry/new-york/example/hover-card-demo.tsx b/apps/www/registry/new-york/example/hover-card-demo.tsx index 16e0750ee7f..1a370a8e090 100644 --- a/apps/www/registry/new-york/example/hover-card-demo.tsx +++ b/apps/www/registry/new-york/example/hover-card-demo.tsx @@ -1,4 +1,4 @@ -import { CalendarIcon } from "@radix-ui/react-icons" +import { CalendarIcon } from "lucide-react" import { Avatar, diff --git a/apps/www/registry/new-york/example/mode-toggle.tsx b/apps/www/registry/new-york/example/mode-toggle.tsx index 506a906a91b..398ed97ac3f 100644 --- a/apps/www/registry/new-york/example/mode-toggle.tsx +++ b/apps/www/registry/new-york/example/mode-toggle.tsx @@ -1,7 +1,7 @@ "use client" import * as React from "react" -import { MoonIcon, SunIcon } from "@radix-ui/react-icons" +import { Moon, MoonIcon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/registry/new-york/ui/button" @@ -19,8 +19,8 @@ export default function ModeToggle() { diff --git a/apps/www/registry/new-york/example/toggle-demo.tsx b/apps/www/registry/new-york/example/toggle-demo.tsx index 99a329cf5bc..d157f88553e 100644 --- a/apps/www/registry/new-york/example/toggle-demo.tsx +++ b/apps/www/registry/new-york/example/toggle-demo.tsx @@ -1,11 +1,11 @@ -import { FontBoldIcon } from "@radix-ui/react-icons" +import { Bold } from "lucide-react" import { Toggle } from "@/registry/new-york/ui/toggle" export default function ToggleDemo() { return ( - + ) } diff --git a/apps/www/registry/new-york/example/toggle-disabled.tsx b/apps/www/registry/new-york/example/toggle-disabled.tsx index 71db7757d3d..f174b1b2ca3 100644 --- a/apps/www/registry/new-york/example/toggle-disabled.tsx +++ b/apps/www/registry/new-york/example/toggle-disabled.tsx @@ -1,11 +1,11 @@ -import { UnderlineIcon } from "@radix-ui/react-icons" +import { Underline } from "lucide-react" import { Toggle } from "@/registry/new-york/ui/toggle" export default function ToggleDisabled() { return ( - + ) } diff --git a/apps/www/registry/new-york/example/toggle-group-demo.tsx b/apps/www/registry/new-york/example/toggle-group-demo.tsx index addc94e1e43..b3ecd262188 100644 --- a/apps/www/registry/new-york/example/toggle-group-demo.tsx +++ b/apps/www/registry/new-york/example/toggle-group-demo.tsx @@ -1,8 +1,4 @@ -import { - FontBoldIcon, - FontItalicIcon, - UnderlineIcon, -} from "@radix-ui/react-icons" +import { Bold, Italic, Underline } from "lucide-react" import { ToggleGroup, @@ -13,13 +9,13 @@ export default function ToggleGroupDemo() { return ( - + - + - + ) diff --git a/apps/www/registry/new-york/example/toggle-group-disabled.tsx b/apps/www/registry/new-york/example/toggle-group-disabled.tsx index c640c184ac0..7116d792003 100644 --- a/apps/www/registry/new-york/example/toggle-group-disabled.tsx +++ b/apps/www/registry/new-york/example/toggle-group-disabled.tsx @@ -1,8 +1,4 @@ -import { - FontBoldIcon, - FontItalicIcon, - UnderlineIcon, -} from "@radix-ui/react-icons" +import { Bold, Italic, Underline } from "lucide-react" import { ToggleGroup, @@ -13,13 +9,13 @@ export default function ToggleGroupDemo() { return ( - + - + - + ) diff --git a/apps/www/registry/new-york/example/toggle-group-lg.tsx b/apps/www/registry/new-york/example/toggle-group-lg.tsx index 5dbd23ee36a..5fc6b585873 100644 --- a/apps/www/registry/new-york/example/toggle-group-lg.tsx +++ b/apps/www/registry/new-york/example/toggle-group-lg.tsx @@ -1,8 +1,4 @@ -import { - FontBoldIcon, - FontItalicIcon, - UnderlineIcon, -} from "@radix-ui/react-icons" +import { Bold, Italic, Underline } from "lucide-react" import { ToggleGroup, @@ -13,13 +9,13 @@ export default function ToggleGroupDemo() { return ( - + - + - + ) diff --git a/apps/www/registry/new-york/example/toggle-group-outline.tsx b/apps/www/registry/new-york/example/toggle-group-outline.tsx index 58400d490ae..c4b42acb888 100644 --- a/apps/www/registry/new-york/example/toggle-group-outline.tsx +++ b/apps/www/registry/new-york/example/toggle-group-outline.tsx @@ -1,8 +1,4 @@ -import { - FontBoldIcon, - FontItalicIcon, - UnderlineIcon, -} from "@radix-ui/react-icons" +import { Bold, Italic, Underline } from "lucide-react" import { ToggleGroup, @@ -13,13 +9,13 @@ export default function ToggleGroupDemo() { return ( - + - + - + ) diff --git a/apps/www/registry/new-york/example/toggle-group-single.tsx b/apps/www/registry/new-york/example/toggle-group-single.tsx index cf2c3faf6eb..ca317159eab 100644 --- a/apps/www/registry/new-york/example/toggle-group-single.tsx +++ b/apps/www/registry/new-york/example/toggle-group-single.tsx @@ -1,8 +1,4 @@ -import { - FontBoldIcon, - FontItalicIcon, - UnderlineIcon, -} from "@radix-ui/react-icons" +import { Bold, Italic, Underline } from "lucide-react" import { ToggleGroup, @@ -13,13 +9,13 @@ export default function ToggleGroupDemo() { return ( - + - + - + ) diff --git a/apps/www/registry/new-york/example/toggle-group-sm.tsx b/apps/www/registry/new-york/example/toggle-group-sm.tsx index 76b451d94d8..6efe37d759a 100644 --- a/apps/www/registry/new-york/example/toggle-group-sm.tsx +++ b/apps/www/registry/new-york/example/toggle-group-sm.tsx @@ -1,8 +1,4 @@ -import { - FontBoldIcon, - FontItalicIcon, - UnderlineIcon, -} from "@radix-ui/react-icons" +import { Bold, Italic, Underline } from "lucide-react" import { ToggleGroup, @@ -13,13 +9,13 @@ export default function ToggleGroupDemo() { return ( - + - + - + ) diff --git a/apps/www/registry/new-york/example/toggle-lg.tsx b/apps/www/registry/new-york/example/toggle-lg.tsx index b1c82354ed0..7158adbb144 100644 --- a/apps/www/registry/new-york/example/toggle-lg.tsx +++ b/apps/www/registry/new-york/example/toggle-lg.tsx @@ -1,11 +1,11 @@ -import { FontItalicIcon } from "@radix-ui/react-icons" +import { Italic } from "lucide-react" import { Toggle } from "@/registry/new-york/ui/toggle" export default function ToggleLg() { return ( - + ) } diff --git a/apps/www/registry/new-york/example/toggle-outline.tsx b/apps/www/registry/new-york/example/toggle-outline.tsx index 21a57eec119..f8b8ceff4c5 100644 --- a/apps/www/registry/new-york/example/toggle-outline.tsx +++ b/apps/www/registry/new-york/example/toggle-outline.tsx @@ -1,11 +1,11 @@ -import { FontItalicIcon } from "@radix-ui/react-icons" +import { Italic } from "lucide-react" import { Toggle } from "@/registry/new-york/ui/toggle" export default function ToggleOutline() { return ( - + ) } diff --git a/apps/www/registry/new-york/example/toggle-sm.tsx b/apps/www/registry/new-york/example/toggle-sm.tsx index 78861438557..cf6068d997e 100644 --- a/apps/www/registry/new-york/example/toggle-sm.tsx +++ b/apps/www/registry/new-york/example/toggle-sm.tsx @@ -1,11 +1,11 @@ -import { FontItalicIcon } from "@radix-ui/react-icons" +import { Italic } from "lucide-react" import { Toggle } from "@/registry/new-york/ui/toggle" export default function ToggleSm() { return ( - + ) } diff --git a/apps/www/registry/new-york/example/toggle-with-text.tsx b/apps/www/registry/new-york/example/toggle-with-text.tsx index e911e9a516f..7f84dd2d736 100644 --- a/apps/www/registry/new-york/example/toggle-with-text.tsx +++ b/apps/www/registry/new-york/example/toggle-with-text.tsx @@ -1,11 +1,11 @@ -import { FontItalicIcon } from "@radix-ui/react-icons" +import { Bold, Italic, Underline } from "lucide-react" import { Toggle } from "@/registry/new-york/ui/toggle" export default function ToggleWithText() { return ( - + Italic ) diff --git a/apps/www/registry/new-york/ui/accordion.tsx b/apps/www/registry/new-york/ui/accordion.tsx index 8dcf9b6fa52..2f27128762d 100644 --- a/apps/www/registry/new-york/ui/accordion.tsx +++ b/apps/www/registry/new-york/ui/accordion.tsx @@ -2,7 +2,7 @@ import * as React from "react" import * as AccordionPrimitive from "@radix-ui/react-accordion" -import { ChevronDownIcon } from "@radix-ui/react-icons" +import { ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" @@ -34,7 +34,7 @@ const AccordionTrigger = React.forwardRef< {...props} > {children} - + )) diff --git a/apps/www/registry/new-york/ui/breadcrumb.tsx b/apps/www/registry/new-york/ui/breadcrumb.tsx index cfdc9ac2e75..60e6c96f72f 100644 --- a/apps/www/registry/new-york/ui/breadcrumb.tsx +++ b/apps/www/registry/new-york/ui/breadcrumb.tsx @@ -1,6 +1,6 @@ import * as React from "react" -import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons" import { Slot } from "@radix-ui/react-slot" +import { ChevronRight, MoreHorizontal } from "lucide-react" import { cn } from "@/lib/utils" @@ -83,7 +83,7 @@ const BreadcrumbSeparator = ({ className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)} {...props} > - {children ?? } + {children ?? } ) BreadcrumbSeparator.displayName = "BreadcrumbSeparator" @@ -98,7 +98,7 @@ const BreadcrumbEllipsis = ({ className={cn("flex h-9 w-9 items-center justify-center", className)} {...props} > - + More ) diff --git a/apps/www/registry/new-york/ui/calendar.tsx b/apps/www/registry/new-york/ui/calendar.tsx index 85571a1ca01..8cfadc19f28 100644 --- a/apps/www/registry/new-york/ui/calendar.tsx +++ b/apps/www/registry/new-york/ui/calendar.tsx @@ -1,7 +1,7 @@ "use client" import * as React from "react" -import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons" +import { ChevronLeft, ChevronRight } from "lucide-react" import { DayPicker } from "react-day-picker" import { cn } from "@/lib/utils" @@ -60,8 +60,8 @@ function Calendar({ ...classNames, }} components={{ - IconLeft: ({ ...props }) => , - IconRight: ({ ...props }) => , + IconLeft: ({ ...props }) => , + IconRight: ({ ...props }) => , }} {...props} /> diff --git a/apps/www/registry/new-york/ui/carousel.tsx b/apps/www/registry/new-york/ui/carousel.tsx index 494acd23b7d..7b006fd659d 100644 --- a/apps/www/registry/new-york/ui/carousel.tsx +++ b/apps/www/registry/new-york/ui/carousel.tsx @@ -1,10 +1,10 @@ "use client" import * as React from "react" -import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons" import useEmblaCarousel, { type UseEmblaCarouselType, } from "embla-carousel-react" +import { ArrowLeft, ArrowRight } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/registry/new-york/ui/button" @@ -216,7 +216,7 @@ const CarouselPrevious = React.forwardRef< onClick={scrollPrev} {...props} > - + Previous slide ) @@ -245,7 +245,7 @@ const CarouselNext = React.forwardRef< onClick={scrollNext} {...props} > - + Next slide ) diff --git a/apps/www/registry/new-york/ui/checkbox.tsx b/apps/www/registry/new-york/ui/checkbox.tsx index 7d2b3c3bdfc..c6fdd071b5d 100644 --- a/apps/www/registry/new-york/ui/checkbox.tsx +++ b/apps/www/registry/new-york/ui/checkbox.tsx @@ -2,7 +2,7 @@ import * as React from "react" import * as CheckboxPrimitive from "@radix-ui/react-checkbox" -import { CheckIcon } from "@radix-ui/react-icons" +import { Check } from "lucide-react" import { cn } from "@/lib/utils" @@ -21,7 +21,7 @@ const Checkbox = React.forwardRef< - + )) diff --git a/apps/www/registry/new-york/ui/command.tsx b/apps/www/registry/new-york/ui/command.tsx index 0a78f08e638..79bcafef0e2 100644 --- a/apps/www/registry/new-york/ui/command.tsx +++ b/apps/www/registry/new-york/ui/command.tsx @@ -2,8 +2,8 @@ import * as React from "react" import { type DialogProps } from "@radix-ui/react-dialog" -import { MagnifyingGlassIcon } from "@radix-ui/react-icons" import { Command as CommandPrimitive } from "cmdk" +import { Search } from "lucide-react" import { cn } from "@/lib/utils" import { Dialog, DialogContent } from "@/registry/new-york/ui/dialog" @@ -42,7 +42,7 @@ const CommandInput = React.forwardRef< React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => (
- + {children} - + )) ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName @@ -108,7 +104,7 @@ const ContextMenuCheckboxItem = React.forwardRef< > - + {children} @@ -131,7 +127,7 @@ const ContextMenuRadioItem = React.forwardRef< > - + {children} diff --git a/apps/www/registry/new-york/ui/dialog.tsx b/apps/www/registry/new-york/ui/dialog.tsx index 95b0d38ac04..1647513eced 100644 --- a/apps/www/registry/new-york/ui/dialog.tsx +++ b/apps/www/registry/new-york/ui/dialog.tsx @@ -2,7 +2,7 @@ import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" -import { Cross2Icon } from "@radix-ui/react-icons" +import { X } from "lucide-react" import { cn } from "@/lib/utils" @@ -45,7 +45,7 @@ const DialogContent = React.forwardRef< > {children} - + Close diff --git a/apps/www/registry/new-york/ui/dropdown-menu.tsx b/apps/www/registry/new-york/ui/dropdown-menu.tsx index 46cbfd8e04c..e6c536d80e0 100644 --- a/apps/www/registry/new-york/ui/dropdown-menu.tsx +++ b/apps/www/registry/new-york/ui/dropdown-menu.tsx @@ -2,11 +2,7 @@ import * as React from "react" import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" -import { - CheckIcon, - ChevronRightIcon, - DotFilledIcon, -} from "@radix-ui/react-icons" +import { Check, ChevronRight, Circle } from "lucide-react" import { cn } from "@/lib/utils" @@ -38,7 +34,7 @@ const DropdownMenuSubTrigger = React.forwardRef< {...props} > {children} - + )) DropdownMenuSubTrigger.displayName = @@ -112,7 +108,7 @@ const DropdownMenuCheckboxItem = React.forwardRef< > - + {children} @@ -135,7 +131,7 @@ const DropdownMenuRadioItem = React.forwardRef< > - + {children} diff --git a/apps/www/registry/new-york/ui/input-otp.tsx b/apps/www/registry/new-york/ui/input-otp.tsx index 84d07209056..eb2a1baea86 100644 --- a/apps/www/registry/new-york/ui/input-otp.tsx +++ b/apps/www/registry/new-york/ui/input-otp.tsx @@ -1,8 +1,8 @@ "use client" import * as React from "react" -import { DashIcon } from "@radix-ui/react-icons" import { OTPInput, OTPInputContext } from "input-otp" +import { Minus } from "lucide-react" import { cn } from "@/lib/utils" @@ -63,7 +63,7 @@ const InputOTPSeparator = React.forwardRef< React.ComponentPropsWithoutRef<"div"> >(({ ...props }, ref) => (
- +
)) InputOTPSeparator.displayName = "InputOTPSeparator" diff --git a/apps/www/registry/new-york/ui/menubar.tsx b/apps/www/registry/new-york/ui/menubar.tsx index 010145cd02e..126091b30a5 100644 --- a/apps/www/registry/new-york/ui/menubar.tsx +++ b/apps/www/registry/new-york/ui/menubar.tsx @@ -1,12 +1,8 @@ "use client" import * as React from "react" -import { - CheckIcon, - ChevronRightIcon, - DotFilledIcon, -} from "@radix-ui/react-icons" import * as MenubarPrimitive from "@radix-ui/react-menubar" +import { Check, ChevronRight, Circle } from "lucide-react" import { cn } from "@/lib/utils" @@ -66,7 +62,7 @@ const MenubarSubTrigger = React.forwardRef< {...props} > {children} - + )) MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName @@ -144,7 +140,7 @@ const MenubarCheckboxItem = React.forwardRef< > - + {children} @@ -166,7 +162,7 @@ const MenubarRadioItem = React.forwardRef< > - + {children} diff --git a/apps/www/registry/new-york/ui/navigation-menu.tsx b/apps/www/registry/new-york/ui/navigation-menu.tsx index 5841fb39856..a5d4d27d346 100644 --- a/apps/www/registry/new-york/ui/navigation-menu.tsx +++ b/apps/www/registry/new-york/ui/navigation-menu.tsx @@ -1,7 +1,7 @@ import * as React from "react" -import { ChevronDownIcon } from "@radix-ui/react-icons" import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu" import { cva } from "class-variance-authority" +import { ChevronDown } from "lucide-react" import { cn } from "@/lib/utils" @@ -54,7 +54,7 @@ const NavigationMenuTrigger = React.forwardRef< {...props} > {children}{" "} -
\n \n \n \n \n \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\n\nexport default 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:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/carousel.json b/apps/www/public/r/styles/new-york/carousel.json index 84f8290c59e..e914cba0061 100644 --- a/apps/www/public/r/styles/new-york/carousel.json +++ b/apps/www/public/r/styles/new-york/carousel.json @@ -10,7 +10,7 @@ "files": [ { "path": "ui/carousel.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ArrowLeftIcon, ArrowRightIcon } from \"@radix-ui/react-icons\"\nimport useEmblaCarousel, {\n type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n opts?: CarouselOptions\n plugins?: CarouselPlugin\n orientation?: \"horizontal\" | \"vertical\"\n setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n carouselRef: ReturnType[0]\n api: ReturnType[1]\n scrollPrev: () => void\n scrollNext: () => void\n canScrollPrev: boolean\n canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext(null)\n\nfunction useCarousel() {\n const context = React.useContext(CarouselContext)\n\n if (!context) {\n throw new Error(\"useCarousel must be used within a \")\n }\n\n return context\n}\n\nconst Carousel = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & CarouselProps\n>(\n (\n {\n orientation = \"horizontal\",\n opts,\n setApi,\n plugins,\n className,\n children,\n ...props\n },\n ref\n ) => {\n const [carouselRef, api] = useEmblaCarousel(\n {\n ...opts,\n axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n },\n plugins\n )\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n const onSelect = React.useCallback((api: CarouselApi) => {\n if (!api) {\n return\n }\n\n setCanScrollPrev(api.canScrollPrev())\n setCanScrollNext(api.canScrollNext())\n }, [])\n\n const scrollPrev = React.useCallback(() => {\n api?.scrollPrev()\n }, [api])\n\n const scrollNext = React.useCallback(() => {\n api?.scrollNext()\n }, [api])\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"ArrowLeft\") {\n event.preventDefault()\n scrollPrev()\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault()\n scrollNext()\n }\n },\n [scrollPrev, scrollNext]\n )\n\n React.useEffect(() => {\n if (!api || !setApi) {\n return\n }\n\n setApi(api)\n }, [api, setApi])\n\n React.useEffect(() => {\n if (!api) {\n return\n }\n\n onSelect(api)\n api.on(\"reInit\", onSelect)\n api.on(\"select\", onSelect)\n\n return () => {\n api?.off(\"select\", onSelect)\n }\n }, [api, onSelect])\n\n return (\n \n \n {children}\n \n \n )\n }\n)\nCarousel.displayName = \"Carousel\"\n\nconst CarouselContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => {\n const { carouselRef, orientation } = useCarousel()\n\n return (\n
\n \n
\n )\n})\nCarouselContent.displayName = \"CarouselContent\"\n\nconst CarouselItem = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => {\n const { orientation } = useCarousel()\n\n return (\n \n )\n})\nCarouselItem.displayName = \"CarouselItem\"\n\nconst CarouselPrevious = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n return (\n \n \n Previous slide\n \n )\n})\nCarouselPrevious.displayName = \"CarouselPrevious\"\n\nconst CarouselNext = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n return (\n \n \n Next slide\n \n )\n})\nCarouselNext.displayName = \"CarouselNext\"\n\nexport {\n type CarouselApi,\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselPrevious,\n CarouselNext,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n opts?: CarouselOptions\n plugins?: CarouselPlugin\n orientation?: \"horizontal\" | \"vertical\"\n setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n carouselRef: ReturnType[0]\n api: ReturnType[1]\n scrollPrev: () => void\n scrollNext: () => void\n canScrollPrev: boolean\n canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext(null)\n\nfunction useCarousel() {\n const context = React.useContext(CarouselContext)\n\n if (!context) {\n throw new Error(\"useCarousel must be used within a \")\n }\n\n return context\n}\n\nconst Carousel = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes & CarouselProps\n>(\n (\n {\n orientation = \"horizontal\",\n opts,\n setApi,\n plugins,\n className,\n children,\n ...props\n },\n ref\n ) => {\n const [carouselRef, api] = useEmblaCarousel(\n {\n ...opts,\n axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n },\n plugins\n )\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n const onSelect = React.useCallback((api: CarouselApi) => {\n if (!api) {\n return\n }\n\n setCanScrollPrev(api.canScrollPrev())\n setCanScrollNext(api.canScrollNext())\n }, [])\n\n const scrollPrev = React.useCallback(() => {\n api?.scrollPrev()\n }, [api])\n\n const scrollNext = React.useCallback(() => {\n api?.scrollNext()\n }, [api])\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.key === \"ArrowLeft\") {\n event.preventDefault()\n scrollPrev()\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault()\n scrollNext()\n }\n },\n [scrollPrev, scrollNext]\n )\n\n React.useEffect(() => {\n if (!api || !setApi) {\n return\n }\n\n setApi(api)\n }, [api, setApi])\n\n React.useEffect(() => {\n if (!api) {\n return\n }\n\n onSelect(api)\n api.on(\"reInit\", onSelect)\n api.on(\"select\", onSelect)\n\n return () => {\n api?.off(\"select\", onSelect)\n }\n }, [api, onSelect])\n\n return (\n \n \n {children}\n \n \n )\n }\n)\nCarousel.displayName = \"Carousel\"\n\nconst CarouselContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => {\n const { carouselRef, orientation } = useCarousel()\n\n return (\n
\n \n
\n )\n})\nCarouselContent.displayName = \"CarouselContent\"\n\nconst CarouselItem = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, ...props }, ref) => {\n const { orientation } = useCarousel()\n\n return (\n \n )\n})\nCarouselItem.displayName = \"CarouselItem\"\n\nconst CarouselPrevious = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n return (\n \n \n Previous slide\n \n )\n})\nCarouselPrevious.displayName = \"CarouselPrevious\"\n\nconst CarouselNext = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps\n>(({ className, variant = \"outline\", size = \"icon\", ...props }, ref) => {\n const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n return (\n \n \n Next slide\n \n )\n})\nCarouselNext.displayName = \"CarouselNext\"\n\nexport {\n type CarouselApi,\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselPrevious,\n CarouselNext,\n}\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/new-york/checkbox.json b/apps/www/public/r/styles/new-york/checkbox.json index f2847a90507..8655d94433c 100644 --- a/apps/www/public/r/styles/new-york/checkbox.json +++ b/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,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n \n \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,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n \n \n))\nCheckbox.displayName = CheckboxPrimitive.Root.displayName\n\nexport { Checkbox }\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/new-york/collapsible-demo.json b/apps/www/public/r/styles/new-york/collapsible-demo.json index 975293982d6..e695664cb65 100644 --- a/apps/www/public/r/styles/new-york/collapsible-demo.json +++ b/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 \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", + "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 \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:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/combobox-demo.json b/apps/www/public/r/styles/new-york/combobox-demo.json index f06a677c7cc..868a07ffa2d 100644 --- a/apps/www/public/r/styles/new-york/combobox-demo.json +++ b/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 \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", + "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 \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:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/combobox-dropdown-menu.json b/apps/www/public/r/styles/new-york/combobox-dropdown-menu.json index e3af13a9952..f1bd23c683e 100644 --- a/apps/www/public/r/styles/new-york/combobox-dropdown-menu.json +++ b/apps/www/public/r/styles/new-york/combobox-dropdown-menu.json @@ -9,7 +9,7 @@ "files": [ { "path": "example/combobox-dropdown-menu.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DotsHorizontalIcon } from \"@radix-ui/react-icons\"\n\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 DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nconst labels = [\n \"feature\",\n \"bug\",\n \"enhancement\",\n \"documentation\",\n \"design\",\n \"question\",\n \"maintenance\",\n]\n\nexport default function ComboboxDropdownMenu() {\n const [label, setLabel] = React.useState(\"feature\")\n const [open, setOpen] = React.useState(false)\n\n return (\n
\n

\n \n {label}\n \n Create a new project\n

\n \n \n \n \n \n Actions\n \n Assign to...\n Set due date...\n \n \n Apply label\n \n \n \n \n No label found.\n \n {labels.map((label) => (\n {\n setLabel(value)\n setOpen(false)\n }}\n >\n {label}\n \n ))}\n \n \n \n \n \n \n \n Delete\n ⌘⌫\n \n \n \n \n
\n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { MoreHorizontal } from \"lucide-react\"\n\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 DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nconst labels = [\n \"feature\",\n \"bug\",\n \"enhancement\",\n \"documentation\",\n \"design\",\n \"question\",\n \"maintenance\",\n]\n\nexport default function ComboboxDropdownMenu() {\n const [label, setLabel] = React.useState(\"feature\")\n const [open, setOpen] = React.useState(false)\n\n return (\n
\n

\n \n {label}\n \n Create a new project\n

\n \n \n \n \n \n Actions\n \n Assign to...\n Set due date...\n \n \n Apply label\n \n \n \n \n No label found.\n \n {labels.map((label) => (\n {\n setLabel(value)\n setOpen(false)\n }}\n >\n {label}\n \n ))}\n \n \n \n \n \n \n \n Delete\n ⌘⌫\n \n \n \n \n
\n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/combobox-form.json b/apps/www/public/r/styles/new-york/combobox-form.json index 3ba69edd9f3..7af99e884e5 100644 --- a/apps/www/public/r/styles/new-york/combobox-form.json +++ b/apps/www/public/r/styles/new-york/combobox-form.json @@ -8,7 +8,7 @@ "files": [ { "path": "example/combobox-form.tsx", - "content": "\"use client\"\n\nimport { zodResolver } from \"@hookform/resolvers/zod\"\nimport { CaretSortIcon, CheckIcon } from \"@radix-ui/react-icons\"\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 {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/new-york/ui/command\"\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 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>({\n resolver: zodResolver(FormSchema),\n })\n\n function onSubmit(data: z.infer) {\n toast({\n title: \"You submitted the following values:\",\n description: (\n 
\n          {JSON.stringify(data, null, 2)}\n
\n ),\n })\n }\n\n return (\n
\n \n (\n \n Language\n \n \n \n \n {field.value\n ? languages.find(\n (language) => language.value === field.value\n )?.label\n : \"Select language\"}\n \n \n \n \n \n \n \n \n No framework found.\n \n {languages.map((language) => (\n {\n form.setValue(\"language\", language.value)\n }}\n >\n {language.label}\n \n \n ))}\n \n \n \n \n \n \n This is the language that will be used in the dashboard.\n \n \n \n )}\n />\n \n \n \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/new-york/hooks/use-toast\"\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 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 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>({\n resolver: zodResolver(FormSchema),\n })\n\n function onSubmit(data: z.infer) {\n toast({\n title: \"You submitted the following values:\",\n description: (\n 
\n          {JSON.stringify(data, null, 2)}\n
\n ),\n })\n }\n\n return (\n
\n \n (\n \n Language\n \n \n \n \n {field.value\n ? languages.find(\n (language) => language.value === field.value\n )?.label\n : \"Select language\"}\n \n \n \n \n \n \n \n \n No framework found.\n \n {languages.map((language) => (\n {\n form.setValue(\"language\", language.value)\n }}\n >\n {language.label}\n \n \n ))}\n \n \n \n \n \n \n This is the language that will be used in the dashboard.\n \n \n \n )}\n />\n \n \n \n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/command-demo.json b/apps/www/public/r/styles/new-york/command-demo.json index 3409b5abfe7..7d6465f82ad 100644 --- a/apps/www/public/r/styles/new-york/command-demo.json +++ b/apps/www/public/r/styles/new-york/command-demo.json @@ -7,7 +7,7 @@ "files": [ { "path": "example/command-demo.tsx", - "content": "import {\n CalendarIcon,\n EnvelopeClosedIcon,\n FaceIcon,\n GearIcon,\n PersonIcon,\n RocketIcon,\n} from \"@radix-ui/react-icons\"\n\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n} from \"@/registry/new-york/ui/command\"\n\nexport default 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 Launch\n \n \n \n \n \n \n Profile\n ⌘P\n \n \n \n Mail\n ⌘B\n \n \n \n Settings\n ⌘S\n \n \n \n \n )\n}\n", + "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/new-york/ui/command\"\n\nexport default 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:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/command-dialog.json b/apps/www/public/r/styles/new-york/command-dialog.json index 72f2dbb8c9b..0ff052f15db 100644 --- a/apps/www/public/r/styles/new-york/command-dialog.json +++ b/apps/www/public/r/styles/new-york/command-dialog.json @@ -8,7 +8,7 @@ "files": [ { "path": "example/command-dialog.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n CalendarIcon,\n EnvelopeClosedIcon,\n FaceIcon,\n GearIcon,\n PersonIcon,\n RocketIcon,\n} from \"@radix-ui/react-icons\"\n\nimport {\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n} from \"@/registry/new-york/ui/command\"\n\nexport default function CommandDialogDemo() {\n const [open, setOpen] = React.useState(false)\n\n React.useEffect(() => {\n const down = (e: KeyboardEvent) => {\n if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n e.preventDefault()\n setOpen((open) => !open)\n }\n }\n\n document.addEventListener(\"keydown\", down)\n return () => document.removeEventListener(\"keydown\", down)\n }, [])\n\n return (\n <>\n

\n Press{\" \"}\n \n ⌘J\n \n

\n \n \n \n No results found.\n \n \n \n Calendar\n \n \n \n Search Emoji\n \n \n \n Launch\n \n \n \n \n \n \n Profile\n ⌘P\n \n \n \n Mail\n ⌘B\n \n \n \n Settings\n ⌘S\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n Calculator,\n Calendar,\n CreditCard,\n Settings,\n Smile,\n User,\n} from \"lucide-react\"\n\nimport {\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n} from \"@/registry/new-york/ui/command\"\n\nexport default function CommandDialogDemo() {\n const [open, setOpen] = React.useState(false)\n\n React.useEffect(() => {\n const down = (e: KeyboardEvent) => {\n if (e.key === \"j\" && (e.metaKey || e.ctrlKey)) {\n e.preventDefault()\n setOpen((open) => !open)\n }\n }\n\n document.addEventListener(\"keydown\", down)\n return () => document.removeEventListener(\"keydown\", down)\n }, [])\n\n return (\n <>\n

\n Press{\" \"}\n \n ⌘J\n \n

\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}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/command.json b/apps/www/public/r/styles/new-york/command.json index 8042fdd39ff..7c7cb666ab6 100644 --- a/apps/www/public/r/styles/new-york/command.json +++ b/apps/www/public/r/styles/new-york/command.json @@ -10,7 +10,7 @@ "files": [ { "path": "ui/command.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\nimport { MagnifyingGlassIcon } from \"@radix-ui/react-icons\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/registry/new-york/ui/dialog\"\n\nconst Command = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nCommand.displayName = CommandPrimitive.displayName\n\ninterface CommandDialogProps extends DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n return (\n \n \n \n {children}\n \n \n \n )\n}\n\nconst CommandInput = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n
\n \n \n
\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>((props, ref) => (\n \n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandShortcut,\n CommandSeparator,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { type DialogProps } from \"@radix-ui/react-dialog\"\nimport { Command as CommandPrimitive } from \"cmdk\"\nimport { Search } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Dialog, DialogContent } from \"@/registry/new-york/ui/dialog\"\n\nconst Command = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nCommand.displayName = CommandPrimitive.displayName\n\ninterface CommandDialogProps extends DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n return (\n \n \n \n {children}\n \n \n \n )\n}\n\nconst CommandInput = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n
\n \n \n
\n))\n\nCommandInput.displayName = CommandPrimitive.Input.displayName\n\nconst CommandList = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\n\nCommandList.displayName = CommandPrimitive.List.displayName\n\nconst CommandEmpty = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>((props, ref) => (\n \n))\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName\n\nconst CommandGroup = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName\n\nconst CommandSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName\n\nconst CommandItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\n\nCommandItem.displayName = CommandPrimitive.Item.displayName\n\nconst CommandShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nCommandShortcut.displayName = \"CommandShortcut\"\n\nexport {\n Command,\n CommandDialog,\n CommandInput,\n CommandList,\n CommandEmpty,\n CommandGroup,\n CommandItem,\n CommandShortcut,\n CommandSeparator,\n}\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/new-york/context-menu.json b/apps/www/public/r/styles/new-york/context-menu.json index 121d33b45ed..fdc5d4c05df 100644 --- a/apps/www/public/r/styles/new-york/context-menu.json +++ b/apps/www/public/r/styles/new-york/context-menu.json @@ -7,7 +7,7 @@ "files": [ { "path": "ui/context-menu.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport {\n CheckIcon,\n ChevronRightIcon,\n DotFilledIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => (\n \n {children}\n \n \n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, checked, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nContextMenuCheckboxItem.displayName =\n ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n ContextMenu,\n ContextMenuTrigger,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuCheckboxItem,\n ContextMenuRadioItem,\n ContextMenuLabel,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuGroup,\n ContextMenuPortal,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuRadioGroup,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ContextMenuPrimitive from \"@radix-ui/react-context-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ContextMenu = ContextMenuPrimitive.Root\n\nconst ContextMenuTrigger = ContextMenuPrimitive.Trigger\n\nconst ContextMenuGroup = ContextMenuPrimitive.Group\n\nconst ContextMenuPortal = ContextMenuPrimitive.Portal\n\nconst ContextMenuSub = ContextMenuPrimitive.Sub\n\nconst ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup\n\nconst ContextMenuSubTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => (\n \n {children}\n \n \n))\nContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName\n\nconst ContextMenuSubContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName\n\nconst ContextMenuContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName\n\nconst ContextMenuItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName\n\nconst ContextMenuCheckboxItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, checked, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nContextMenuCheckboxItem.displayName =\n ContextMenuPrimitive.CheckboxItem.displayName\n\nconst ContextMenuRadioItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName\n\nconst ContextMenuLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName\n\nconst ContextMenuSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName\n\nconst ContextMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nContextMenuShortcut.displayName = \"ContextMenuShortcut\"\n\nexport {\n ContextMenu,\n ContextMenuTrigger,\n ContextMenuContent,\n ContextMenuItem,\n ContextMenuCheckboxItem,\n ContextMenuRadioItem,\n ContextMenuLabel,\n ContextMenuSeparator,\n ContextMenuShortcut,\n ContextMenuGroup,\n ContextMenuPortal,\n ContextMenuSub,\n ContextMenuSubContent,\n ContextMenuSubTrigger,\n ContextMenuRadioGroup,\n}\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/new-york/data-table-demo.json b/apps/www/public/r/styles/new-york/data-table-demo.json index 8db46bba321..9a4e23249ce 100644 --- a/apps/www/public/r/styles/new-york/data-table-demo.json +++ b/apps/www/public/r/styles/new-york/data-table-demo.json @@ -7,7 +7,7 @@ "files": [ { "path": "example/data-table-demo.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n CaretSortIcon,\n ChevronDownIcon,\n DotsHorizontalIcon,\n} from \"@radix-ui/react-icons\"\nimport {\n ColumnDef,\n ColumnFiltersState,\n SortingState,\n VisibilityState,\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from \"@tanstack/react-table\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/new-york/ui/table\"\n\nconst data: Payment[] = [\n {\n id: \"m5gr84i9\",\n amount: 316,\n status: \"success\",\n email: \"ken99@yahoo.com\",\n },\n {\n id: \"3u1reuv4\",\n amount: 242,\n status: \"success\",\n email: \"Abe45@gmail.com\",\n },\n {\n id: \"derv1ws0\",\n amount: 837,\n status: \"processing\",\n email: \"Monserrat44@gmail.com\",\n },\n {\n id: \"5kma53ae\",\n amount: 874,\n status: \"success\",\n email: \"Silas22@gmail.com\",\n },\n {\n id: \"bhqecj4p\",\n amount: 721,\n status: \"failed\",\n email: \"carmella@hotmail.com\",\n },\n]\n\nexport type Payment = {\n id: string\n amount: number\n status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n email: string\n}\n\nexport const columns: ColumnDef[] = [\n {\n id: \"select\",\n header: ({ table }) => (\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n ),\n cell: ({ row }) => (\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n
{row.getValue(\"status\")}
\n ),\n },\n {\n accessorKey: \"email\",\n header: ({ column }) => {\n return (\n column.toggleSorting(column.getIsSorted() === \"asc\")}\n >\n Email\n \n \n )\n },\n cell: ({ row }) =>
{row.getValue(\"email\")}
,\n },\n {\n accessorKey: \"amount\",\n header: () =>
Amount
,\n cell: ({ row }) => {\n const amount = parseFloat(row.getValue(\"amount\"))\n\n // Format the amount as a dollar amount\n const formatted = new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n }).format(amount)\n\n return
{formatted}
\n },\n },\n {\n id: \"actions\",\n enableHiding: false,\n cell: ({ row }) => {\n const payment = row.original\n\n return (\n \n \n \n \n \n Actions\n navigator.clipboard.writeText(payment.id)}\n >\n Copy payment ID\n \n \n View customer\n View payment details\n \n \n )\n },\n },\n]\n\nexport default function DataTableDemo() {\n const [sorting, setSorting] = React.useState([])\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [rowSelection, setRowSelection] = React.useState({})\n\n const table = useReactTable({\n data,\n columns,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n onColumnVisibilityChange: setColumnVisibility,\n onRowSelectionChange: setRowSelection,\n state: {\n sorting,\n columnFilters,\n columnVisibility,\n rowSelection,\n },\n })\n\n return (\n
\n
\n \n table.getColumn(\"email\")?.setFilterValue(event.target.value)\n }\n className=\"max-w-sm\"\n />\n \n \n \n \n \n {table\n .getAllColumns()\n .filter((column) => column.getCanHide())\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n
\n
\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map((row) => (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n \n ))}\n \n ))\n ) : (\n \n \n No results.\n \n \n )}\n \n
\n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Previous\n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Next\n \n
\n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ColumnDef,\n ColumnFiltersState,\n SortingState,\n VisibilityState,\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Checkbox } from \"@/registry/new-york/ui/checkbox\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/new-york/ui/table\"\n\nconst data: Payment[] = [\n {\n id: \"m5gr84i9\",\n amount: 316,\n status: \"success\",\n email: \"ken99@yahoo.com\",\n },\n {\n id: \"3u1reuv4\",\n amount: 242,\n status: \"success\",\n email: \"Abe45@gmail.com\",\n },\n {\n id: \"derv1ws0\",\n amount: 837,\n status: \"processing\",\n email: \"Monserrat44@gmail.com\",\n },\n {\n id: \"5kma53ae\",\n amount: 874,\n status: \"success\",\n email: \"Silas22@gmail.com\",\n },\n {\n id: \"bhqecj4p\",\n amount: 721,\n status: \"failed\",\n email: \"carmella@hotmail.com\",\n },\n]\n\nexport type Payment = {\n id: string\n amount: number\n status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n email: string\n}\n\nexport const columns: ColumnDef[] = [\n {\n id: \"select\",\n header: ({ table }) => (\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n ),\n cell: ({ row }) => (\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n
{row.getValue(\"status\")}
\n ),\n },\n {\n accessorKey: \"email\",\n header: ({ column }) => {\n return (\n column.toggleSorting(column.getIsSorted() === \"asc\")}\n >\n Email\n \n \n )\n },\n cell: ({ row }) =>
{row.getValue(\"email\")}
,\n },\n {\n accessorKey: \"amount\",\n header: () =>
Amount
,\n cell: ({ row }) => {\n const amount = parseFloat(row.getValue(\"amount\"))\n\n // Format the amount as a dollar amount\n const formatted = new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n }).format(amount)\n\n return
{formatted}
\n },\n },\n {\n id: \"actions\",\n enableHiding: false,\n cell: ({ row }) => {\n const payment = row.original\n\n return (\n \n \n \n \n \n Actions\n navigator.clipboard.writeText(payment.id)}\n >\n Copy payment ID\n \n \n View customer\n View payment details\n \n \n )\n },\n },\n]\n\nexport default function DataTableDemo() {\n const [sorting, setSorting] = React.useState([])\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [rowSelection, setRowSelection] = React.useState({})\n\n const table = useReactTable({\n data,\n columns,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n onColumnVisibilityChange: setColumnVisibility,\n onRowSelectionChange: setRowSelection,\n state: {\n sorting,\n columnFilters,\n columnVisibility,\n rowSelection,\n },\n })\n\n return (\n
\n
\n \n table.getColumn(\"email\")?.setFilterValue(event.target.value)\n }\n className=\"max-w-sm\"\n />\n \n \n \n \n \n {table\n .getAllColumns()\n .filter((column) => column.getCanHide())\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n
\n
\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map((row) => (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n \n ))}\n \n ))\n ) : (\n \n \n No results.\n \n \n )}\n \n
\n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Previous\n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Next\n \n
\n
\n
\n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/date-picker-demo.json b/apps/www/public/r/styles/new-york/date-picker-demo.json index 13b35a4df78..e43cdba766f 100644 --- a/apps/www/public/r/styles/new-york/date-picker-demo.json +++ b/apps/www/public/r/styles/new-york/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 { CalendarIcon } from \"@radix-ui/react-icons\"\nimport { format } from \"date-fns\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default 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", + "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/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default 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:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/date-picker-form.json b/apps/www/public/r/styles/new-york/date-picker-form.json index b08354035ad..2e4abf31324 100644 --- a/apps/www/public/r/styles/new-york/date-picker-form.json +++ b/apps/www/public/r/styles/new-york/date-picker-form.json @@ -13,7 +13,7 @@ "files": [ { "path": "example/date-picker-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 DatePickerForm() {\n const form = useForm>({\n resolver: zodResolver(FormSchema),\n })\n\n function onSubmit(data: z.infer) {\n toast({\n title: \"You submitted the following values:\",\n description: (\n 
\n          {JSON.stringify(data, null, 2)}\n
\n ),\n })\n }\n\n return (\n
\n \n (\n \n Date of birth\n \n \n \n \n {field.value ? (\n format(field.value, \"PPP\")\n ) : (\n Pick a date\n )}\n \n \n \n \n \n \n date > new Date() || date < new Date(\"1900-01-01\")\n }\n initialFocus\n />\n \n \n \n Your date of birth is used to calculate your age.\n \n \n \n )}\n />\n \n \n \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 DatePickerForm() {\n const form = useForm>({\n resolver: zodResolver(FormSchema),\n })\n\n function onSubmit(data: z.infer) {\n toast({\n title: \"You submitted the following values:\",\n description: (\n 
\n          {JSON.stringify(data, null, 2)}\n
\n ),\n })\n }\n\n return (\n
\n \n (\n \n Date of birth\n \n \n \n \n {field.value ? (\n format(field.value, \"PPP\")\n ) : (\n Pick a date\n )}\n \n \n \n \n \n \n date > new Date() || date < new Date(\"1900-01-01\")\n }\n initialFocus\n />\n \n \n \n Your date of birth is used to calculate your age.\n \n \n \n )}\n />\n \n \n \n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/date-picker-with-presets.json b/apps/www/public/r/styles/new-york/date-picker-with-presets.json index 2a24bea81f4..f42b35fb6d7 100644 --- a/apps/www/public/r/styles/new-york/date-picker-with-presets.json +++ b/apps/www/public/r/styles/new-york/date-picker-with-presets.json @@ -13,7 +13,7 @@ "files": [ { "path": "example/date-picker-with-presets.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"@radix-ui/react-icons\"\nimport { addDays, format } from \"date-fns\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport default function DatePickerWithPresets() {\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 setDate(addDays(new Date(), parseInt(value)))\n }\n >\n \n \n \n \n Today\n Tomorrow\n In 3 days\n In a week\n \n \n
\n \n
\n
\n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/new-york/ui/select\"\n\nexport default function DatePickerWithPresets() {\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 setDate(addDays(new Date(), parseInt(value)))\n }\n >\n \n \n \n \n Today\n Tomorrow\n In 3 days\n In a week\n \n \n
\n \n
\n \n \n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/date-picker-with-range.json b/apps/www/public/r/styles/new-york/date-picker-with-range.json index 96966b76e35..2b6063c37c2 100644 --- a/apps/www/public/r/styles/new-york/date-picker-with-range.json +++ b/apps/www/public/r/styles/new-york/date-picker-with-range.json @@ -12,7 +12,7 @@ "files": [ { "path": "example/date-picker-with-range.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CalendarIcon } from \"@radix-ui/react-icons\"\nimport { addDays, format } from \"date-fns\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function DatePickerWithRange({\n className,\n}: React.HTMLAttributes) {\n const [date, setDate] = React.useState({\n from: new Date(2022, 0, 20),\n to: addDays(new Date(2022, 0, 20), 20),\n })\n\n return (\n
\n \n \n \n \n {date?.from ? (\n date.to ? (\n <>\n {format(date.from, \"LLL dd, y\")} -{\" \"}\n {format(date.to, \"LLL dd, y\")}\n \n ) : (\n format(date.from, \"LLL dd, y\")\n )\n ) : (\n Pick a date\n )}\n \n \n \n \n \n \n
\n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays, format } from \"date-fns\"\nimport { CalendarIcon } from \"lucide-react\"\nimport { DateRange } from \"react-day-picker\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport { Calendar } from \"@/registry/new-york/ui/calendar\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\nexport default function DatePickerWithRange({\n className,\n}: React.HTMLAttributes) {\n const [date, setDate] = React.useState({\n from: new Date(2022, 0, 20),\n to: addDays(new Date(2022, 0, 20), 20),\n })\n\n return (\n
\n \n \n \n \n {date?.from ? (\n date.to ? (\n <>\n {format(date.from, \"LLL dd, y\")} -{\" \"}\n {format(date.to, \"LLL dd, y\")}\n \n ) : (\n format(date.from, \"LLL dd, y\")\n )\n ) : (\n Pick a date\n )}\n \n \n \n \n \n \n
\n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/dialog-close-button.json b/apps/www/public/r/styles/new-york/dialog-close-button.json index 1d00f253d96..72732cd894f 100644 --- a/apps/www/public/r/styles/new-york/dialog-close-button.json +++ b/apps/www/public/r/styles/new-york/dialog-close-button.json @@ -8,7 +8,7 @@ "files": [ { "path": "example/dialog-close-button.tsx", - "content": "import { CopyIcon } from \"@radix-ui/react-icons\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function DialogCloseButton() {\n return (\n \n \n \n \n \n \n Share link\n \n Anyone who has this link will be able to view this.\n \n \n
\n
\n \n \n
\n \n
\n \n \n \n \n \n \n \n )\n}\n", + "content": "import { Copy } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/registry/new-york/ui/dialog\"\nimport { Input } from \"@/registry/new-york/ui/input\"\nimport { Label } from \"@/registry/new-york/ui/label\"\n\nexport default function DialogCloseButton() {\n return (\n \n \n \n \n \n \n Share link\n \n Anyone who has this link will be able to view this.\n \n \n
\n
\n \n \n
\n \n
\n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/dialog.json b/apps/www/public/r/styles/new-york/dialog.json index ed3b300be20..f4638d05848 100644 --- a/apps/www/public/r/styles/new-york/dialog.json +++ b/apps/www/public/r/styles/new-york/dialog.json @@ -7,7 +7,7 @@ "files": [ { "path": "ui/dialog.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogTrigger,\n DialogClose,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Dialog = DialogPrimitive.Root\n\nconst DialogTrigger = DialogPrimitive.Trigger\n\nconst DialogPortal = DialogPrimitive.Portal\n\nconst DialogClose = DialogPrimitive.Close\n\nconst DialogOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogOverlay.displayName = DialogPrimitive.Overlay.displayName\n\nconst DialogContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n {children}\n \n \n Close\n \n \n \n))\nDialogContent.displayName = DialogPrimitive.Content.displayName\n\nconst DialogHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogHeader.displayName = \"DialogHeader\"\n\nconst DialogFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nDialogFooter.displayName = \"DialogFooter\"\n\nconst DialogTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogTitle.displayName = DialogPrimitive.Title.displayName\n\nconst DialogDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDialogDescription.displayName = DialogPrimitive.Description.displayName\n\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogTrigger,\n DialogClose,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n}\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/new-york/drawer-demo.json b/apps/www/public/r/styles/new-york/drawer-demo.json index d493937e2a0..880dcb64314 100644 --- a/apps/www/public/r/styles/new-york/drawer-demo.json +++ b/apps/www/public/r/styles/new-york/drawer-demo.json @@ -7,7 +7,7 @@ "files": [ { "path": "example/drawer-demo.tsx", - "content": "import * as React from \"react\"\nimport { MinusIcon, PlusIcon } from \"@radix-ui/react-icons\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/new-york/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 \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", + "content": "import * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/new-york/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 \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:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/dropdown-menu.json b/apps/www/public/r/styles/new-york/dropdown-menu.json index 2e3b16f15f4..50f3f0a7dbd 100644 --- a/apps/www/public/r/styles/new-york/dropdown-menu.json +++ b/apps/www/public/r/styles/new-york/dropdown-menu.json @@ -7,7 +7,7 @@ "files": [ { "path": "ui/dropdown-menu.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport {\n CheckIcon,\n ChevronRightIcon,\n DotFilledIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => (\n \n {children}\n \n \n))\nDropdownMenuSubTrigger.displayName =\n DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDropdownMenuSubContent.displayName =\n DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, sideOffset = 4, ...props }, ref) => (\n \n \n \n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n svg]:size-4 [&>svg]:shrink-0\",\n inset && \"pl-8\",\n className\n )}\n {...props}\n />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, checked, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nDropdownMenuCheckboxItem.displayName =\n DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuRadioGroup,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => (\n \n {children}\n \n \n))\nDropdownMenuSubTrigger.displayName =\n DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDropdownMenuSubContent.displayName =\n DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, sideOffset = 4, ...props }, ref) => (\n \n \n \n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n svg]:size-4 [&>svg]:shrink-0\",\n inset && \"pl-8\",\n className\n )}\n {...props}\n />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, checked, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nDropdownMenuCheckboxItem.displayName =\n DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuRadioGroup,\n}\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/new-york/hover-card-demo.json b/apps/www/public/r/styles/new-york/hover-card-demo.json index 4ff5df81922..c8e3463eb53 100644 --- a/apps/www/public/r/styles/new-york/hover-card-demo.json +++ b/apps/www/public/r/styles/new-york/hover-card-demo.json @@ -7,7 +7,7 @@ "files": [ { "path": "example/hover-card-demo.tsx", - "content": "import { CalendarIcon } from \"@radix-ui/react-icons\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n HoverCard,\n HoverCardContent,\n HoverCardTrigger,\n} from \"@/registry/new-york/ui/hover-card\"\n\nexport default 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", + "content": "import { CalendarIcon } from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york/ui/avatar\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n HoverCard,\n HoverCardContent,\n HoverCardTrigger,\n} from \"@/registry/new-york/ui/hover-card\"\n\nexport default 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:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/index.json b/apps/www/public/r/styles/new-york/index.json index 8a9843ac17e..dd5e08b657a 100644 --- a/apps/www/public/r/styles/new-york/index.json +++ b/apps/www/public/r/styles/new-york/index.json @@ -4,8 +4,7 @@ "dependencies": [ "tailwindcss-animate", "class-variance-authority", - "lucide-react", - "@radix-ui/react-icons" + "lucide-react" ], "registryDependencies": [ "utils" diff --git a/apps/www/public/r/styles/new-york/input-otp.json b/apps/www/public/r/styles/new-york/input-otp.json index 45700c73f22..b56bdc6f4c9 100644 --- a/apps/www/public/r/styles/new-york/input-otp.json +++ b/apps/www/public/r/styles/new-york/input-otp.json @@ -7,7 +7,7 @@ "files": [ { "path": "ui/input-otp.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DashIcon } from \"@radix-ui/react-icons\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst InputOTP = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, containerClassName, ...props }, ref) => (\n \n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n React.ElementRef<\"div\">,\n React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n
\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n React.ElementRef<\"div\">,\n React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n const inputOTPContext = React.useContext(OTPInputContext)\n const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n return (\n \n {char}\n {hasFakeCaret && (\n
\n
\n
\n )}\n
\n )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n React.ElementRef<\"div\">,\n React.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n
\n \n
\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { Minus } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst InputOTP = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, containerClassName, ...props }, ref) => (\n \n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n React.ElementRef<\"div\">,\n React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n
\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n React.ElementRef<\"div\">,\n React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n const inputOTPContext = React.useContext(OTPInputContext)\n const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n return (\n \n {char}\n {hasFakeCaret && (\n
\n
\n
\n )}\n
\n )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n React.ElementRef<\"div\">,\n React.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n
\n \n
\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/new-york/menubar.json b/apps/www/public/r/styles/new-york/menubar.json index 967cb08ae04..ab506f5d8f7 100644 --- a/apps/www/public/r/styles/new-york/menubar.json +++ b/apps/www/public/r/styles/new-york/menubar.json @@ -7,7 +7,7 @@ "files": [ { "path": "ui/menubar.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n CheckIcon,\n ChevronRightIcon,\n DotFilledIcon,\n} from \"@radix-ui/react-icons\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst MenubarMenu = MenubarPrimitive.Menu\n\nconst MenubarGroup = MenubarPrimitive.Group\n\nconst MenubarPortal = MenubarPrimitive.Portal\n\nconst MenubarSub = MenubarPrimitive.Sub\n\nconst MenubarRadioGroup = MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => (\n \n {children}\n \n \n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(\n (\n { className, align = \"start\", alignOffset = -4, sideOffset = 8, ...props },\n ref\n ) => (\n \n \n \n )\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, checked, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nMenubarShortcut.displayname = \"MenubarShortcut\"\n\nexport {\n Menubar,\n MenubarMenu,\n MenubarTrigger,\n MenubarContent,\n MenubarItem,\n MenubarSeparator,\n MenubarLabel,\n MenubarCheckboxItem,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarPortal,\n MenubarSubContent,\n MenubarSubTrigger,\n MenubarGroup,\n MenubarSub,\n MenubarShortcut,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst MenubarMenu = MenubarPrimitive.Menu\n\nconst MenubarGroup = MenubarPrimitive.Group\n\nconst MenubarPortal = MenubarPrimitive.Portal\n\nconst MenubarSub = MenubarPrimitive.Sub\n\nconst MenubarRadioGroup = MenubarPrimitive.RadioGroup\n\nconst Menubar = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => (\n \n {children}\n \n \n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(\n (\n { className, align = \"start\", alignOffset = -4, sideOffset = 8, ...props },\n ref\n ) => (\n \n \n \n )\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, checked, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nMenubarShortcut.displayname = \"MenubarShortcut\"\n\nexport {\n Menubar,\n MenubarMenu,\n MenubarTrigger,\n MenubarContent,\n MenubarItem,\n MenubarSeparator,\n MenubarLabel,\n MenubarCheckboxItem,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarPortal,\n MenubarSubContent,\n MenubarSubTrigger,\n MenubarGroup,\n MenubarSub,\n MenubarShortcut,\n}\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/new-york/mode-toggle.json b/apps/www/public/r/styles/new-york/mode-toggle.json index 478cd3f5206..5173fe02b0b 100644 --- a/apps/www/public/r/styles/new-york/mode-toggle.json +++ b/apps/www/public/r/styles/new-york/mode-toggle.json @@ -4,7 +4,7 @@ "files": [ { "path": "example/mode-toggle.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { MoonIcon, SunIcon } from \"@radix-ui/react-icons\"\nimport { useTheme } from \"next-themes\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n const { setTheme } = useTheme()\n\n return (\n \n \n \n \n \n setTheme(\"light\")}>\n Light\n \n setTheme(\"dark\")}>\n Dark\n \n setTheme(\"system\")}>\n System\n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Moon, MoonIcon, Sun } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\n\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/new-york/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n const { setTheme } = useTheme()\n\n return (\n \n \n \n \n \n setTheme(\"light\")}>\n Light\n \n setTheme(\"dark\")}>\n Dark\n \n setTheme(\"system\")}>\n System\n \n \n \n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/navigation-menu.json b/apps/www/public/r/styles/new-york/navigation-menu.json index 97ca99f2038..c84330a9fd2 100644 --- a/apps/www/public/r/styles/new-york/navigation-menu.json +++ b/apps/www/public/r/styles/new-york/navigation-menu.json @@ -7,7 +7,7 @@ "files": [ { "path": "ui/navigation-menu.tsx", - "content": "import * as React from \"react\"\nimport { ChevronDownIcon } from \"@radix-ui/react-icons\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst NavigationMenu = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n {children}\n \n \n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50\"\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n {children}{\" \"}\n \n \n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n
\n \n
\n))\nNavigationMenuViewport.displayName =\n NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n
\n \n))\nNavigationMenuIndicator.displayName =\n NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n navigationMenuTriggerStyle,\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n}\n", + "content": "import * as React from \"react\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst NavigationMenu = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n {children}\n \n \n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst navigationMenuTriggerStyle = cva(\n \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50\"\n)\n\nconst NavigationMenuTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n {children}{\" \"}\n \n \n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n
\n \n
\n))\nNavigationMenuViewport.displayName =\n NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n
\n \n))\nNavigationMenuIndicator.displayName =\n NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n navigationMenuTriggerStyle,\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n}\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/new-york/pagination.json b/apps/www/public/r/styles/new-york/pagination.json index 1ed4a074f5b..8bf0722c1d1 100644 --- a/apps/www/public/r/styles/new-york/pagination.json +++ b/apps/www/public/r/styles/new-york/pagination.json @@ -7,7 +7,7 @@ "files": [ { "path": "ui/pagination.tsx", - "content": "import * as React from \"react\"\nimport {\n ChevronLeftIcon,\n ChevronRightIcon,\n DotsHorizontalIcon,\n} from \"@radix-ui/react-icons\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ButtonProps, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n \n)\nPagination.displayName = \"Pagination\"\n\nconst PaginationContent = React.forwardRef<\n HTMLUListElement,\n React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n \n))\nPaginationContent.displayName = \"PaginationContent\"\n\nconst PaginationItem = React.forwardRef<\n HTMLLIElement,\n React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n
  • \n))\nPaginationItem.displayName = \"PaginationItem\"\n\ntype PaginationLinkProps = {\n isActive?: boolean\n} & Pick &\n React.ComponentProps<\"a\">\n\nconst PaginationLink = ({\n className,\n isActive,\n size = \"icon\",\n ...props\n}: PaginationLinkProps) => (\n \n)\nPaginationLink.displayName = \"PaginationLink\"\n\nconst PaginationPrevious = ({\n className,\n ...props\n}: React.ComponentProps) => (\n \n \n Previous\n \n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nconst PaginationNext = ({\n className,\n ...props\n}: React.ComponentProps) => (\n \n Next\n \n \n)\nPaginationNext.displayName = \"PaginationNext\"\n\nconst PaginationEllipsis = ({\n className,\n ...props\n}: React.ComponentProps<\"span\">) => (\n \n \n More pages\n \n)\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\nexport {\n Pagination,\n PaginationContent,\n PaginationLink,\n PaginationItem,\n PaginationPrevious,\n PaginationNext,\n PaginationEllipsis,\n}\n", + "content": "import * as React from \"react\"\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ButtonProps, buttonVariants } from \"@/registry/new-york/ui/button\"\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n \n)\nPagination.displayName = \"Pagination\"\n\nconst PaginationContent = React.forwardRef<\n HTMLUListElement,\n React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n \n))\nPaginationContent.displayName = \"PaginationContent\"\n\nconst PaginationItem = React.forwardRef<\n HTMLLIElement,\n React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n
  • \n))\nPaginationItem.displayName = \"PaginationItem\"\n\ntype PaginationLinkProps = {\n isActive?: boolean\n} & Pick &\n React.ComponentProps<\"a\">\n\nconst PaginationLink = ({\n className,\n isActive,\n size = \"icon\",\n ...props\n}: PaginationLinkProps) => (\n \n)\nPaginationLink.displayName = \"PaginationLink\"\n\nconst PaginationPrevious = ({\n className,\n ...props\n}: React.ComponentProps) => (\n \n \n Previous\n \n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nconst PaginationNext = ({\n className,\n ...props\n}: React.ComponentProps) => (\n \n Next\n \n \n)\nPaginationNext.displayName = \"PaginationNext\"\n\nconst PaginationEllipsis = ({\n className,\n ...props\n}: React.ComponentProps<\"span\">) => (\n \n \n More pages\n \n)\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\nexport {\n Pagination,\n PaginationContent,\n PaginationLink,\n PaginationItem,\n PaginationPrevious,\n PaginationNext,\n PaginationEllipsis,\n}\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/new-york/radio-group.json b/apps/www/public/r/styles/new-york/radio-group.json index ae7c0c4bd50..9554c8e87af 100644 --- a/apps/www/public/r/styles/new-york/radio-group.json +++ b/apps/www/public/r/styles/new-york/radio-group.json @@ -7,7 +7,7 @@ "files": [ { "path": "ui/radio-group.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon } from \"@radix-ui/react-icons\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => {\n return (\n \n )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => {\n return (\n \n \n \n \n \n )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RadioGroupPrimitive from \"@radix-ui/react-radio-group\"\nimport { Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst RadioGroup = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => {\n return (\n \n )\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => {\n return (\n \n \n \n \n \n )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/new-york/resizable.json b/apps/www/public/r/styles/new-york/resizable.json index fa20e695437..9b0f3007fac 100644 --- a/apps/www/public/r/styles/new-york/resizable.json +++ b/apps/www/public/r/styles/new-york/resizable.json @@ -7,7 +7,7 @@ "files": [ { "path": "ui/resizable.tsx", - "content": "\"use client\"\n\nimport { DragHandleDots2Icon } from \"@radix-ui/react-icons\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizablePanelGroup = ({\n className,\n ...props\n}: React.ComponentProps) => (\n \n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n withHandle,\n className,\n ...props\n}: React.ComponentProps & {\n withHandle?: boolean\n}) => (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
    \n \n
    \n )}\n \n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n", + "content": "\"use client\"\n\nimport { GripVertical } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizablePanelGroup = ({\n className,\n ...props\n}: React.ComponentProps) => (\n \n)\n\nconst ResizablePanel = ResizablePrimitive.Panel\n\nconst ResizableHandle = ({\n withHandle,\n className,\n ...props\n}: React.ComponentProps & {\n withHandle?: boolean\n}) => (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n
    \n \n
    \n )}\n \n)\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/new-york/select.json b/apps/www/public/r/styles/new-york/select.json index e998fc1a64a..d67e122b2fd 100644 --- a/apps/www/public/r/styles/new-york/select.json +++ b/apps/www/public/r/styles/new-york/select.json @@ -7,7 +7,7 @@ "files": [ { "path": "ui/select.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n CaretSortIcon,\n CheckIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n} from \"@radix-ui/react-icons\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n span]:line-clamp-1\",\n className\n )}\n {...props}\n >\n {children}\n \n \n \n \n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n \n \n \n \n {children}\n \n \n \n \n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n SelectScrollUpButton,\n SelectScrollDownButton,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { Check, ChevronDown, ChevronUp } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Select = SelectPrimitive.Root\n\nconst SelectGroup = SelectPrimitive.Group\n\nconst SelectValue = SelectPrimitive.Value\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n span]:line-clamp-1\",\n className\n )}\n {...props}\n >\n {children}\n \n \n \n \n))\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName\n\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName\n\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName\n\nconst SelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n \n \n \n \n {children}\n \n \n \n \n))\nSelectContent.displayName = SelectPrimitive.Content.displayName\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectLabel.displayName = SelectPrimitive.Label.displayName\n\nconst SelectItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nSelectItem.displayName = SelectPrimitive.Item.displayName\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName\n\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n SelectScrollUpButton,\n SelectScrollDownButton,\n}\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/new-york/sheet.json b/apps/www/public/r/styles/new-york/sheet.json index 39a262ba76b..a1801fcb12d 100644 --- a/apps/www/public/r/styles/new-york/sheet.json +++ b/apps/www/public/r/styles/new-york/sheet.json @@ -7,7 +7,7 @@ "files": [ { "path": "ui/sheet.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out\",\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n },\n },\n defaultVariants: {\n side: \"right\",\n },\n }\n)\n\ninterface SheetContentProps\n extends React.ComponentPropsWithoutRef,\n VariantProps {}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef,\n SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n \n \n \n \n \n Close\n \n {children}\n \n \n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetPortal,\n SheetOverlay,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst Sheet = SheetPrimitive.Root\n\nconst SheetTrigger = SheetPrimitive.Trigger\n\nconst SheetClose = SheetPrimitive.Close\n\nconst SheetPortal = SheetPrimitive.Portal\n\nconst SheetOverlay = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName\n\nconst sheetVariants = cva(\n \"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out\",\n {\n variants: {\n side: {\n top: \"inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top\",\n bottom:\n \"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom\",\n left: \"inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm\",\n right:\n \"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm\",\n },\n },\n defaultVariants: {\n side: \"right\",\n },\n }\n)\n\ninterface SheetContentProps\n extends React.ComponentPropsWithoutRef,\n VariantProps {}\n\nconst SheetContent = React.forwardRef<\n React.ElementRef,\n SheetContentProps\n>(({ side = \"right\", className, children, ...props }, ref) => (\n \n \n \n \n \n Close\n \n {children}\n \n \n))\nSheetContent.displayName = SheetPrimitive.Content.displayName\n\nconst SheetHeader = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetHeader.displayName = \"SheetHeader\"\n\nconst SheetFooter = ({\n className,\n ...props\n}: React.HTMLAttributes) => (\n \n)\nSheetFooter.displayName = \"SheetFooter\"\n\nconst SheetTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetTitle.displayName = SheetPrimitive.Title.displayName\n\nconst SheetDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nSheetDescription.displayName = SheetPrimitive.Description.displayName\n\nexport {\n Sheet,\n SheetPortal,\n SheetOverlay,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/public/r/styles/new-york/toast.json b/apps/www/public/r/styles/new-york/toast.json index 652407b812f..e977d422f19 100644 --- a/apps/www/public/r/styles/new-york/toast.json +++ b/apps/www/public/r/styles/new-york/toast.json @@ -7,7 +7,7 @@ "files": [ { "path": "ui/toast.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Cross2Icon } from \"@radix-ui/react-icons\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n \"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full\",\n {\n variants: {\n variant: {\n default: \"border bg-background text-foreground\",\n destructive:\n \"destructive group border-destructive bg-destructive text-destructive-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Toast = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef &\n VariantProps\n>(({ className, variant, ...props }, ref) => {\n return (\n \n )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef\n\ntype ToastActionElement = React.ReactElement\n\nexport {\n type ToastProps,\n type ToastActionElement,\n ToastProvider,\n ToastViewport,\n Toast,\n ToastTitle,\n ToastDescription,\n ToastClose,\n ToastAction,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToastPrimitives from \"@radix-ui/react-toast\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { X } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ToastProvider = ToastPrimitives.Provider\n\nconst ToastViewport = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastViewport.displayName = ToastPrimitives.Viewport.displayName\n\nconst toastVariants = cva(\n \"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full\",\n {\n variants: {\n variant: {\n default: \"border bg-background text-foreground\",\n destructive:\n \"destructive group border-destructive bg-destructive text-destructive-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nconst Toast = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef &\n VariantProps\n>(({ className, variant, ...props }, ref) => {\n return (\n \n )\n})\nToast.displayName = ToastPrimitives.Root.displayName\n\nconst ToastAction = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastAction.displayName = ToastPrimitives.Action.displayName\n\nconst ToastClose = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n))\nToastClose.displayName = ToastPrimitives.Close.displayName\n\nconst ToastTitle = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastTitle.displayName = ToastPrimitives.Title.displayName\n\nconst ToastDescription = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nToastDescription.displayName = ToastPrimitives.Description.displayName\n\ntype ToastProps = React.ComponentPropsWithoutRef\n\ntype ToastActionElement = React.ReactElement\n\nexport {\n type ToastProps,\n type ToastActionElement,\n ToastProvider,\n ToastViewport,\n Toast,\n ToastTitle,\n ToastDescription,\n ToastClose,\n ToastAction,\n}\n", "type": "registry:ui" }, { diff --git a/apps/www/public/r/styles/new-york/toggle-demo.json b/apps/www/public/r/styles/new-york/toggle-demo.json index 479784cdd8b..246e95be35a 100644 --- a/apps/www/public/r/styles/new-york/toggle-demo.json +++ b/apps/www/public/r/styles/new-york/toggle-demo.json @@ -7,7 +7,7 @@ "files": [ { "path": "example/toggle-demo.tsx", - "content": "import { FontBoldIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleDemo() {\n return (\n \n \n \n )\n}\n", + "content": "import { Bold } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleDemo() {\n return (\n \n \n \n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/toggle-disabled.json b/apps/www/public/r/styles/new-york/toggle-disabled.json index a63f927376b..5c9bb636827 100644 --- a/apps/www/public/r/styles/new-york/toggle-disabled.json +++ b/apps/www/public/r/styles/new-york/toggle-disabled.json @@ -7,7 +7,7 @@ "files": [ { "path": "example/toggle-disabled.tsx", - "content": "import { UnderlineIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleDisabled() {\n return (\n \n \n \n )\n}\n", + "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleDisabled() {\n return (\n \n \n \n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/toggle-group-demo.json b/apps/www/public/r/styles/new-york/toggle-group-demo.json index efe36fd5b5a..6f4cc067148 100644 --- a/apps/www/public/r/styles/new-york/toggle-group-demo.json +++ b/apps/www/public/r/styles/new-york/toggle-group-demo.json @@ -7,7 +7,7 @@ "files": [ { "path": "example/toggle-group-demo.tsx", - "content": "import {\n FontBoldIcon,\n FontItalicIcon,\n UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/toggle-group-disabled.json b/apps/www/public/r/styles/new-york/toggle-group-disabled.json index 8ba434c3675..c9fc0029135 100644 --- a/apps/www/public/r/styles/new-york/toggle-group-disabled.json +++ b/apps/www/public/r/styles/new-york/toggle-group-disabled.json @@ -7,7 +7,7 @@ "files": [ { "path": "example/toggle-group-disabled.tsx", - "content": "import {\n FontBoldIcon,\n FontItalicIcon,\n UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/toggle-group-lg.json b/apps/www/public/r/styles/new-york/toggle-group-lg.json index 634b2b08320..5a3c12d5fca 100644 --- a/apps/www/public/r/styles/new-york/toggle-group-lg.json +++ b/apps/www/public/r/styles/new-york/toggle-group-lg.json @@ -7,7 +7,7 @@ "files": [ { "path": "example/toggle-group-lg.tsx", - "content": "import {\n FontBoldIcon,\n FontItalicIcon,\n UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/toggle-group-outline.json b/apps/www/public/r/styles/new-york/toggle-group-outline.json index 0de52215ecf..50bc81ea19c 100644 --- a/apps/www/public/r/styles/new-york/toggle-group-outline.json +++ b/apps/www/public/r/styles/new-york/toggle-group-outline.json @@ -7,7 +7,7 @@ "files": [ { "path": "example/toggle-group-outline.tsx", - "content": "import {\n FontBoldIcon,\n FontItalicIcon,\n UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/toggle-group-single.json b/apps/www/public/r/styles/new-york/toggle-group-single.json index 1c869a9b6cc..a92a1b52281 100644 --- a/apps/www/public/r/styles/new-york/toggle-group-single.json +++ b/apps/www/public/r/styles/new-york/toggle-group-single.json @@ -7,7 +7,7 @@ "files": [ { "path": "example/toggle-group-single.tsx", - "content": "import {\n FontBoldIcon,\n FontItalicIcon,\n UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/toggle-group-sm.json b/apps/www/public/r/styles/new-york/toggle-group-sm.json index 5820770e066..ac8a1f0aaf2 100644 --- a/apps/www/public/r/styles/new-york/toggle-group-sm.json +++ b/apps/www/public/r/styles/new-york/toggle-group-sm.json @@ -7,7 +7,7 @@ "files": [ { "path": "example/toggle-group-sm.tsx", - "content": "import {\n FontBoldIcon,\n FontItalicIcon,\n UnderlineIcon,\n} from \"@radix-ui/react-icons\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/toggle-lg.json b/apps/www/public/r/styles/new-york/toggle-lg.json index 882c7cf6876..0d88bad66e7 100644 --- a/apps/www/public/r/styles/new-york/toggle-lg.json +++ b/apps/www/public/r/styles/new-york/toggle-lg.json @@ -7,7 +7,7 @@ "files": [ { "path": "example/toggle-lg.tsx", - "content": "import { FontItalicIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleLg() {\n return (\n \n \n \n )\n}\n", + "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleLg() {\n return (\n \n \n \n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/toggle-outline.json b/apps/www/public/r/styles/new-york/toggle-outline.json index dd53e394134..ffd7134d744 100644 --- a/apps/www/public/r/styles/new-york/toggle-outline.json +++ b/apps/www/public/r/styles/new-york/toggle-outline.json @@ -7,7 +7,7 @@ "files": [ { "path": "example/toggle-outline.tsx", - "content": "import { FontItalicIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleOutline() {\n return (\n \n \n \n )\n}\n", + "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleOutline() {\n return (\n \n \n \n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/toggle-sm.json b/apps/www/public/r/styles/new-york/toggle-sm.json index 0460978b7af..4e484489361 100644 --- a/apps/www/public/r/styles/new-york/toggle-sm.json +++ b/apps/www/public/r/styles/new-york/toggle-sm.json @@ -7,7 +7,7 @@ "files": [ { "path": "example/toggle-sm.tsx", - "content": "import { FontItalicIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleSm() {\n return (\n \n \n \n )\n}\n", + "content": "import { Italic } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleSm() {\n return (\n \n \n \n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/public/r/styles/new-york/toggle-with-text.json b/apps/www/public/r/styles/new-york/toggle-with-text.json index 20c0b16ad10..67bae0ea614 100644 --- a/apps/www/public/r/styles/new-york/toggle-with-text.json +++ b/apps/www/public/r/styles/new-york/toggle-with-text.json @@ -7,7 +7,7 @@ "files": [ { "path": "example/toggle-with-text.tsx", - "content": "import { FontItalicIcon } from \"@radix-ui/react-icons\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleWithText() {\n return (\n \n \n Italic\n \n )\n}\n", + "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york/ui/toggle\"\n\nexport default function ToggleWithText() {\n return (\n \n \n Italic\n \n )\n}\n", "type": "registry:example", "target": "" } diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts index 9d7bbefdfd7..36579789d7d 100644 --- a/apps/www/scripts/build-registry.mts +++ b/apps/www/scripts/build-registry.mts @@ -484,9 +484,9 @@ async function buildStylesIndex() { ] // TODO: Remove this when we migrate to lucide-react. - if (style.name === "new-york") { - dependencies.push("@radix-ui/react-icons") - } + // if (style.name === "new-york") { + // dependencies.push("@radix-ui/react-icons") + // } const payload: RegistryEntry = { name: style.name, diff --git a/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap b/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap index e83b429fe1a..308c60901f9 100644 --- a/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap +++ b/packages/shadcn/test/utils/schema/__snapshots__/registry-resolve-items-tree.test.ts.snap @@ -384,7 +384,7 @@ const CommandItem = React.forwardRef< Date: Mon, 28 Oct 2024 12:57:08 +0400 Subject: [PATCH 04/16] chore: add test:dev --- packages/cli/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/cli/package.json b/packages/cli/package.json index 8bb0123578c..2af355c5ee2 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -41,7 +41,8 @@ "pub:beta": "pnpm build && pnpm publish --no-git-checks --access public --tag beta", "pub:next": "pnpm build && pnpm publish --no-git-checks --access public --tag next", "pub:release": "pnpm build && pnpm publish --access public", - "test": "vitest run" + "test": "vitest run", + "test:dev": "REGISTRY_URL=http://localhost:3333 vitest run" }, "dependencies": { "@antfu/ni": "^0.21.4", From c5af315a9b995ebdcfdde34adff3c1b52f9ed349 Mon Sep 17 00:00:00 2001 From: shadcn Date: Mon, 28 Oct 2024 12:57:44 +0400 Subject: [PATCH 05/16] chore: add changeset --- .changeset/tame-falcons-beg.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/tame-falcons-beg.md diff --git a/.changeset/tame-falcons-beg.md b/.changeset/tame-falcons-beg.md new file mode 100644 index 00000000000..f3e00fb6e89 --- /dev/null +++ b/.changeset/tame-falcons-beg.md @@ -0,0 +1,6 @@ +--- +"shadcn": patch +"shadcn-ui": patch +--- + +update icons handling From 382ab44ac6fa016dee3f0cf38f023fd5313f2f41 Mon Sep 17 00:00:00 2001 From: shadcn Date: Mon, 28 Oct 2024 22:57:54 +0400 Subject: [PATCH 06/16] feat: build an icon registry --- apps/www/__registry__/icons.tsx | 439 ++++++++++++++++++++++++++++ apps/www/public/r/icons/index.json | 146 +++++++++ apps/www/scripts/build-registry.mts | 63 ++++ 3 files changed, 648 insertions(+) create mode 100644 apps/www/__registry__/icons.tsx create mode 100644 apps/www/public/r/icons/index.json diff --git a/apps/www/__registry__/icons.tsx b/apps/www/__registry__/icons.tsx new file mode 100644 index 00000000000..3f8f721ffe6 --- /dev/null +++ b/apps/www/__registry__/icons.tsx @@ -0,0 +1,439 @@ +// @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, + })) + ), + }, + 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, + })) + ), + }, +} diff --git a/apps/www/public/r/icons/index.json b/apps/www/public/r/icons/index.json new file mode 100644 index 00000000000..9fbcb863ef1 --- /dev/null +++ b/apps/www/public/r/icons/index.json @@ -0,0 +1,146 @@ +{ + "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" + }, + "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" + } +} \ No newline at end of file diff --git a/apps/www/scripts/build-registry.mts b/apps/www/scripts/build-registry.mts index 36579789d7d..d4ad32bf5e3 100644 --- a/apps/www/scripts/build-registry.mts +++ b/apps/www/scripts/build-registry.mts @@ -11,6 +11,7 @@ import { z } from "zod" import { registry } from "../registry" import { baseColors } from "../registry/registry-base-colors" import { colorMapping, colors } from "../registry/registry-colors" +import { iconLibraries, icons } from "../registry/registry-icons" import { styles } from "../registry/registry-styles" import { Registry, @@ -811,6 +812,65 @@ async function buildThemes() { } } +// ---------------------------------------------------------------------------- +// Build registry/icons/index.json. +// ---------------------------------------------------------------------------- +async function buildIcons() { + const iconsTargetPath = path.join(REGISTRY_PATH, "icons") + rimraf.sync(iconsTargetPath) + if (!existsSync(iconsTargetPath)) { + await fs.mkdir(iconsTargetPath, { recursive: true }) + } + + const iconsData = icons + + await fs.writeFile( + path.join(iconsTargetPath, "index.json"), + JSON.stringify(iconsData, null, 2), + "utf8" + ) +} + +// ---------------------------------------------------------------------------- +// Build __registry__/icons.tsx. +// ---------------------------------------------------------------------------- +async function buildRegistryIcons() { + let index = `// @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 = { +` + + for (const [icon, libraries] of Object.entries(icons)) { + index += ` "${icon}": {` + for (const [library, componentName] of Object.entries(libraries)) { + const packageName = iconLibraries[library] + if (packageName) { + index += ` + ${library}: React.lazy(() => import("${packageName}").then(mod => ({ + default: mod.${componentName} + }))),` + } + } + index += ` +},` + } + + index += ` +} +` + + // Write style index. + rimraf.sync(path.join(process.cwd(), "__registry__/icons.tsx")) + await fs.writeFile( + path.join(process.cwd(), "__registry__/icons.tsx"), + index, + "utf8" + ) +} + try { const result = registrySchema.safeParse(registry) @@ -824,6 +884,9 @@ try { await buildStylesIndex() await buildThemes() + await buildRegistryIcons() + await buildIcons() + console.log("✅ Done!") } catch (error) { console.error(error) From 77988a10d1b1ed4380151d871e87181802493b79 Mon Sep 17 00:00:00 2001 From: shadcn Date: Mon, 28 Oct 2024 22:59:48 +0400 Subject: [PATCH 07/16] chore: add missing registry icons --- apps/www/registry/registry-icons.ts | 154 ++++++++++++++++++++++++++++ 1 file changed, 154 insertions(+) create mode 100644 apps/www/registry/registry-icons.ts diff --git a/apps/www/registry/registry-icons.ts b/apps/www/registry/registry-icons.ts new file mode 100644 index 00000000000..1f2fe0ceaf7 --- /dev/null +++ b/apps/www/registry/registry-icons.ts @@ -0,0 +1,154 @@ +export const iconLibraries = { + lucide: "lucide-react", + radix: "@radix-ui/react-icons", +} as const + +export const icons: Record< + string, + Record +> = { + 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", + }, + 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", + }, +} as const From 923846bb049a9594da7ab85665b1159cf7e944cd Mon Sep 17 00:00:00 2001 From: shadcn Date: Tue, 29 Oct 2024 00:10:34 +0400 Subject: [PATCH 08/16] feat: add an icons debug page --- apps/www/app/(app)/colors/layout.tsx | 4 +-- apps/www/app/(app)/icons/layout.tsx | 34 ++++++++++++++++++ apps/www/app/(app)/icons/page.tsx | 52 ++++++++++++++++++++++++++++ 3 files changed, 88 insertions(+), 2 deletions(-) create mode 100644 apps/www/app/(app)/icons/layout.tsx create mode 100644 apps/www/app/(app)/icons/page.tsx diff --git a/apps/www/app/(app)/colors/layout.tsx b/apps/www/app/(app)/colors/layout.tsx index 35d973c625e..12211f05d5a 100644 --- a/apps/www/app/(app)/colors/layout.tsx +++ b/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({ -
    +
    {children}
    • diff --git a/apps/www/app/(app)/icons/layout.tsx b/apps/www/app/(app)/icons/layout.tsx new file mode 100644 index 00000000000..e8fc4e32866 --- /dev/null +++ b/apps/www/app/(app)/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 ( +
    + + + Icons + + All icons in all libraries. + + +
    + {children} +
    +
    + ) +} diff --git a/apps/www/app/(app)/icons/page.tsx b/apps/www/app/(app)/icons/page.tsx new file mode 100644 index 00000000000..8b1d6f6a0e6 --- /dev/null +++ b/apps/www/app/(app)/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 ( +
    + + + + + name + + {Object.values(iconLibraries).map((library) => ( + {library} + ))} + + + + {Object.entries(Icons).map(([name, icon]) => ( + + + {name} + + {Object.entries(iconLibraries).map(([library, name]) => { + const IconComponent = icon[library as keyof typeof icon] + return ( + + Loading...}> + {IconComponent && } + + + ) + })} + + ))} + +
    +
    + ) +} From 976ab4b7d421898ca369488d8faa6475f6370d9f Mon Sep 17 00:00:00 2001 From: shadcn Date: Tue, 29 Oct 2024 00:11:28 +0400 Subject: [PATCH 09/16] feat: add an icon migration --- package.json | 1 + packages/shadcn/package.json | 1 + packages/shadcn/src/commands/migrate.ts | 89 +++++++ packages/shadcn/src/index.ts | 3 +- .../shadcn/src/migrations/migrate-icons.ts | 227 ++++++++++++++++++ .../src/preflights/preflight-migrate.ts | 64 +++++ packages/shadcn/src/utils/registry/index.ts | 11 + packages/shadcn/src/utils/registry/schema.ts | 5 + 8 files changed, 400 insertions(+), 1 deletion(-) create mode 100644 packages/shadcn/src/commands/migrate.ts create mode 100644 packages/shadcn/src/migrations/migrate-icons.ts create mode 100644 packages/shadcn/src/preflights/preflight-migrate.ts diff --git a/package.json b/package.json index fd65f929e4a..d33ecaae951 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "cli:build": "pnpm --filter=shadcn-ui build", "shadcn:dev": "turbo --filter=shadcn dev", "shadcn": "pnpm --filter=shadcn start:dev", + "shadcn:prod": "pnpm --filter=shadcn start:prod", "shadcn:build": "pnpm --filter=shadcn build", "shadcn:test": "pnpm --filter=shadcn test", "docs:build": "pnpm --filter=www build:docs", diff --git a/packages/shadcn/package.json b/packages/shadcn/package.json index d048ec13be1..1889a2b8ac2 100644 --- a/packages/shadcn/package.json +++ b/packages/shadcn/package.json @@ -34,6 +34,7 @@ "typecheck": "tsc --noEmit", "clean": "rimraf dist && rimraf components", "start:dev": "cross-env REGISTRY_URL=http://localhost:3333/r node dist/index.js", + "start:prod": "cross-env REGISTRY_URL=https://ui.shadcn.com/r node dist/index.js", "start": "node dist/index.js", "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache", "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache", diff --git a/packages/shadcn/src/commands/migrate.ts b/packages/shadcn/src/commands/migrate.ts new file mode 100644 index 00000000000..45ee546051f --- /dev/null +++ b/packages/shadcn/src/commands/migrate.ts @@ -0,0 +1,89 @@ +import path from "path" +import { migrateIcons } from "@/src/migrations/migrate-icons" +import { preFlightMigrate } from "@/src/preflights/preflight-migrate" +import * as ERRORS from "@/src/utils/errors" +import { handleError } from "@/src/utils/handle-error" +import { logger } from "@/src/utils/logger" +import { Command } from "commander" +import { z } from "zod" + +export const migrations = [ + { + name: "icons", + description: "migrate your ui components to a different icon library.", + }, +] as const + +export const migrateOptionsSchema = z.object({ + cwd: z.string(), + list: z.boolean(), + migration: z + .string() + .refine( + (value) => + value && migrations.some((migration) => migration.name === value), + { + message: + "You must specify a valid migration. Run `shadcn migrate --list` to see available migrations.", + } + ) + .optional(), +}) + +export const migrate = new Command() + .name("migrate") + .description("run a migration.") + .argument("[migration]", "the migration to run.") + .option( + "-c, --cwd ", + "the working directory. defaults to the current directory.", + process.cwd() + ) + .option("-l, --list", "list all migrations.", false) + .action(async (migration, opts) => { + try { + const options = migrateOptionsSchema.parse({ + cwd: path.resolve(opts.cwd), + migration, + list: opts.list, + }) + + if (options.list || !options.migration) { + logger.info("Available migrations:") + for (const migration of migrations) { + logger.info(`- ${migration.name}: ${migration.description}`) + } + return + } + + if (!options.migration) { + throw new Error( + "You must specify a migration. Run `shadcn migrate --list` to see available migrations." + ) + } + + let { errors, config } = await preFlightMigrate(options) + + if ( + errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] || + errors[ERRORS.MISSING_CONFIG] + ) { + throw new Error( + "No `components.json` file found. Ensure you are at the root of your project." + ) + } + + if (!config) { + throw new Error( + "Something went wrong reading your `components.json` file. Please ensure you have a valid `components.json` file." + ) + } + + if (options.migration === "icons") { + await migrateIcons(config) + } + } catch (error) { + logger.break() + handleError(error) + } + }) diff --git a/packages/shadcn/src/index.ts b/packages/shadcn/src/index.ts index c324a642768..a6903dce330 100644 --- a/packages/shadcn/src/index.ts +++ b/packages/shadcn/src/index.ts @@ -2,6 +2,7 @@ import { add } from "@/src/commands/add" import { diff } from "@/src/commands/diff" import { init } from "@/src/commands/init" +import { migrate } from "@/src/commands/migrate" import { Command } from "commander" import packageJson from "../package.json" @@ -19,7 +20,7 @@ async function main() { "display the version number" ) - program.addCommand(init).addCommand(add).addCommand(diff) + program.addCommand(init).addCommand(add).addCommand(diff).addCommand(migrate) program.parse() } diff --git a/packages/shadcn/src/migrations/migrate-icons.ts b/packages/shadcn/src/migrations/migrate-icons.ts new file mode 100644 index 00000000000..c3c76552c76 --- /dev/null +++ b/packages/shadcn/src/migrations/migrate-icons.ts @@ -0,0 +1,227 @@ +import { randomBytes } from "crypto" +import { promises as fs } from "fs" +import { tmpdir } from "os" +import path from "path" +import { Config } from "@/src/utils/get-config" +import { getPackageInfo } from "@/src/utils/get-package-info" +import { highlighter } from "@/src/utils/highlighter" +import { logger } from "@/src/utils/logger" +import { getRegistryIcons } from "@/src/utils/registry" +import { iconsSchema } from "@/src/utils/registry/schema" +import { spinner } from "@/src/utils/spinner" +import fg from "fast-glob" +import prompts from "prompts" +import { Project, ScriptKind, SyntaxKind } from "ts-morph" +import { PackageJson } from "type-fest" +import { z } from "zod" + +export const iconLibraries = { + lucide: "lucide-react", + radix: "@radix-ui/react-icons", +} + +export async function migrateIcons(config: Config) { + if (!config.resolvedPaths.ui) { + throw new Error( + "We could not find a valid `ui` path in your `components.json` file. Please ensure you have a valid `ui` path in your `components.json` file." + ) + } + + const uiPath = config.resolvedPaths.ui + const [files, registryIcons] = await Promise.all([ + fg("**/*.{js,ts,jsx,tsx}", { + cwd: uiPath, + }), + getRegistryIcons(), + ]) + + if (Object.keys(registryIcons).length === 0) { + throw new Error("Something went wrong fetching the registry icons.") + } + + const packageInfo = getPackageInfo(config.resolvedPaths.cwd) + + const projectIconLibraries = packageInfo ? _getIconLibraries(packageInfo) : [] + + const libraryChoices = Object.entries(iconLibraries).map( + ([name, packageName]) => ({ + title: packageName, + value: name, + }) + ) + + let initialSourceLibrary = projectIconLibraries.includes( + "@radix-ui/react-icons" + ) + ? libraryChoices.findIndex((choice) => choice.value === "radix") + : 0 + let initialTargetLibrary = projectIconLibraries.includes("lucide-react") + ? libraryChoices.findIndex((choice) => choice.value === "lucide") + : 0 + + const migrateOptions = await prompts([ + { + type: "select", + name: "sourceLibrary", + message: `Which icon library would you like to ${highlighter.info( + "migrate from" + )}?`, + choices: libraryChoices, + initial: initialSourceLibrary, + }, + { + type: "select", + name: "targetLibrary", + message: `Which icon library would you like to ${highlighter.info( + "migrate to" + )}?`, + choices: libraryChoices, + initial: initialTargetLibrary, + }, + ]) + + if (migrateOptions.sourceLibrary === migrateOptions.targetLibrary) { + throw new Error( + "You cannot migrate to the same icon library. Please choose a different icon library." + ) + } + + if ( + !( + migrateOptions.sourceLibrary in iconLibraries && + migrateOptions.targetLibrary in iconLibraries + ) + ) { + throw new Error("Invalid icon library. Please choose a valid icon library.") + } + + const sourceLibrary = + iconLibraries[migrateOptions.sourceLibrary as keyof typeof iconLibraries] + const targetLibrary = + iconLibraries[migrateOptions.targetLibrary as keyof typeof iconLibraries] + + const { confirm } = await prompts({ + type: "confirm", + name: "confirm", + initial: true, + message: `We will migrate ${highlighter.info( + files.length + )} files in ${highlighter.info( + `./${path.relative(config.resolvedPaths.cwd, uiPath)}` + )} from ${highlighter.info(sourceLibrary)} to ${highlighter.info( + targetLibrary + )}. Continue?`, + }) + + if (!confirm) { + logger.info("Migration cancelled.") + process.exit(0) + } + + const migrationSpinner = spinner(`Migrating icons...`)?.start() + + await Promise.all( + files.map(async (file) => { + migrationSpinner.text = `Migrating ${file}...` + + const filePath = path.join(uiPath, file) + const fileContent = await fs.readFile(filePath, "utf-8") + + const content = await migrateIconsFile( + fileContent, + migrateOptions.sourceLibrary, + migrateOptions.targetLibrary, + registryIcons + ) + + await fs.writeFile(filePath, content) + }) + ) + + migrationSpinner.succeed("Migration complete.") +} + +export async function migrateIconsFile( + content: string, + sourceLibrary: keyof typeof iconLibraries, + targetLibrary: keyof typeof iconLibraries, + iconsMapping: z.infer +) { + const sourceLibraryName = iconLibraries[sourceLibrary] + const targetLibraryName = iconLibraries[targetLibrary] + + const dir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-")) + const project = new Project({ + compilerOptions: {}, + }) + + const tempFile = path.join( + dir, + `shadcn-icons-${randomBytes(4).toString("hex")}.tsx` + ) + const sourceFile = project.createSourceFile(tempFile, content, { + scriptKind: ScriptKind.TSX, + }) + + // Find all sourceLibrary imports. + let targetedIcons: string[] = [] + for (const importDeclaration of sourceFile.getImportDeclarations() ?? []) { + if ( + importDeclaration.getModuleSpecifier()?.getText() !== + `"${sourceLibraryName}"` + ) { + continue + } + + for (const specifier of importDeclaration.getNamedImports() ?? []) { + const iconName = specifier.getName() + + // TODO: this is O(n^2) but okay for now. + const targetedIcon = Object.values(iconsMapping).find( + (icon) => icon[sourceLibrary] === iconName + )?.[targetLibrary] + + if (!targetedIcon) { + continue + } + + targetedIcons.push(targetedIcon) + + // Remove the named import. + specifier.remove() + + // Replace with the targeted icon. + const jsxElements = sourceFile.getDescendantsOfKind( + SyntaxKind.JsxSelfClosingElement + ) + const iconElement = jsxElements.find( + (node) => node.getTagNameNode()?.getText() === iconName + ) + iconElement?.getTagNameNode()?.replaceWithText(targetedIcon) + } + + // If the named import is empty, remove the import declaration. + if (importDeclaration.getNamedImports()?.length === 0) { + importDeclaration.remove() + } + } + + if (targetedIcons.length > 0) { + sourceFile.addImportDeclaration({ + moduleSpecifier: targetLibraryName, + namedImports: targetedIcons.map((icon) => ({ + name: icon, + })), + }) + } + + return await sourceFile.getText() +} + +function _getIconLibraries(packageInfo: PackageJson) { + return Object.values(iconLibraries).filter( + (library) => + packageInfo.dependencies?.[library] || + packageInfo.devDependencies?.[library] + ) +} diff --git a/packages/shadcn/src/preflights/preflight-migrate.ts b/packages/shadcn/src/preflights/preflight-migrate.ts new file mode 100644 index 00000000000..8c5f647155c --- /dev/null +++ b/packages/shadcn/src/preflights/preflight-migrate.ts @@ -0,0 +1,64 @@ +import path from "path" +import { addOptionsSchema } from "@/src/commands/add" +import { migrateOptionsSchema } from "@/src/commands/migrate" +import * as ERRORS from "@/src/utils/errors" +import { getConfig } from "@/src/utils/get-config" +import { highlighter } from "@/src/utils/highlighter" +import { logger } from "@/src/utils/logger" +import fs from "fs-extra" +import { z } from "zod" + +export async function preFlightMigrate( + options: z.infer +) { + const errors: Record = {} + + // Ensure target directory exists. + // Check for empty project. We assume if no package.json exists, the project is empty. + if ( + !fs.existsSync(options.cwd) || + !fs.existsSync(path.resolve(options.cwd, "package.json")) + ) { + errors[ERRORS.MISSING_DIR_OR_EMPTY_PROJECT] = true + return { + errors, + config: null, + } + } + + // Check for existing components.json file. + if (!fs.existsSync(path.resolve(options.cwd, "components.json"))) { + errors[ERRORS.MISSING_CONFIG] = true + return { + errors, + config: null, + } + } + + try { + const config = await getConfig(options.cwd) + + return { + errors, + config: config!, + } + } catch (error) { + logger.break() + logger.error( + `An invalid ${highlighter.info( + "components.json" + )} file was found at ${highlighter.info( + options.cwd + )}.\nBefore you can run a migration, you must create a valid ${highlighter.info( + "components.json" + )} file by running the ${highlighter.info("init")} command.` + ) + logger.error( + `Learn more at ${highlighter.info( + "https://ui.shadcn.com/docs/components-json" + )}.` + ) + logger.break() + process.exit(1) + } +} diff --git a/packages/shadcn/src/utils/registry/index.ts b/packages/shadcn/src/utils/registry/index.ts index 429ce4c4add..5d06aee846b 100644 --- a/packages/shadcn/src/utils/registry/index.ts +++ b/packages/shadcn/src/utils/registry/index.ts @@ -4,6 +4,7 @@ import { handleError } from "@/src/utils/handle-error" import { highlighter } from "@/src/utils/highlighter" import { logger } from "@/src/utils/logger" import { + iconsSchema, registryBaseColorSchema, registryIndexSchema, registryItemFileSchema, @@ -46,6 +47,16 @@ export async function getRegistryStyles() { } } +export async function getRegistryIcons() { + try { + const [result] = await fetchRegistry(["icons/index.json"]) + return iconsSchema.parse(result) + } catch (error) { + handleError(error) + return {} + } +} + export async function getRegistryItem(name: string, style: string) { try { const [result] = await fetchRegistry([ diff --git a/packages/shadcn/src/utils/registry/schema.ts b/packages/shadcn/src/utils/registry/schema.ts index 8f76d324b24..ebbb7cda827 100644 --- a/packages/shadcn/src/utils/registry/schema.ts +++ b/packages/shadcn/src/utils/registry/schema.ts @@ -64,6 +64,11 @@ export const stylesSchema = z.array( }) ) +export const iconsSchema = z.record( + z.string(), + z.record(z.string(), z.string()) +) + export const registryBaseColorSchema = z.object({ inlineColors: z.object({ light: z.record(z.string(), z.string()), From bd02e24d05706d0a1486559b3fdf59f9cae9ffb2 Mon Sep 17 00:00:00 2001 From: shadcn Date: Mon, 4 Nov 2024 15:40:48 +0400 Subject: [PATCH 10/16] chore(www): migrate all radix icons to lucide --- apps/www/app/(app)/docs/[[...slug]]/page.tsx | 8 ++--- .../examples/cards/components/github-card.tsx | 17 ++++----- .../cards/components/notifications.tsx | 8 ++--- .../cards/components/team-members.tsx | 8 ++--- .../components/date-range-picker.tsx | 2 +- .../dashboard/components/team-switcher.tsx | 14 +++----- .../examples/forms/account/account-form.tsx | 8 ++--- .../forms/appearance/appearance-form.tsx | 4 +-- .../music/components/album-artwork.tsx | 4 +-- apps/www/app/(app)/examples/music/page.tsx | 4 +-- .../playground/components/model-selector.tsx | 11 +++--- .../playground/components/preset-actions.tsx | 6 ++-- .../playground/components/preset-selector.tsx | 8 ++--- .../playground/components/preset-share.tsx | 4 +-- .../app/(app)/examples/playground/page.tsx | 8 ++--- .../components/data-table-column-header.tsx | 19 ++++------ .../components/data-table-faceted-filter.tsx | 6 ++-- .../components/data-table-pagination.tsx | 20 +++++------ .../components/data-table-row-actions.tsx | 4 +-- .../tasks/components/data-table-toolbar.tsx | 4 +-- .../components/data-table-view-options.tsx | 4 +-- .../app/(app)/examples/tasks/data/data.tsx | 34 +++++++++--------- apps/www/components/announcement.tsx | 7 ++-- apps/www/components/command-menu.tsx | 18 ++++------ apps/www/components/examples-nav.tsx | 7 ++-- apps/www/components/pager.tsx | 6 ++-- apps/www/components/theme-customizer.tsx | 35 +++++-------------- apps/www/content/docs/installation/manual.mdx | 6 ---- .../r/styles/new-york/dropdown-menu.json | 2 +- .../registry/new-york/ui/dropdown-menu.tsx | 2 +- 30 files changed, 119 insertions(+), 169 deletions(-) diff --git a/apps/www/app/(app)/docs/[[...slug]]/page.tsx b/apps/www/app/(app)/docs/[[...slug]]/page.tsx index 076542e7c3d..ed95548fe0f 100644 --- a/apps/www/app/(app)/docs/[[...slug]]/page.tsx +++ b/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" @@ -92,7 +92,7 @@ export default async function DocPage({ params }: DocPageProps) {
    Docs
    - +
    {doc.title}
    @@ -115,7 +115,7 @@ export default async function DocPage({ params }: DocPageProps) { className={cn(badgeVariants({ variant: "secondary" }), "gap-1")} > Docs - + )} {doc.links?.api && ( @@ -126,7 +126,7 @@ export default async function DocPage({ params }: DocPageProps) { className={cn(badgeVariants({ variant: "secondary" }), "gap-1")} > API Reference - + )}
    diff --git a/apps/www/app/(app)/examples/cards/components/github-card.tsx b/apps/www/app/(app)/examples/cards/components/github-card.tsx index b80ea22b221..9e4c039da47 100644 --- a/apps/www/app/(app)/examples/cards/components/github-card.tsx +++ b/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() {
    Inspiration - Create List + Create List @@ -71,11 +66,11 @@ export function DemoGithub() {
    - + TypeScript
    - + 20k
    Updated April 2023
    diff --git a/apps/www/app/(app)/examples/cards/components/notifications.tsx b/apps/www/app/(app)/examples/cards/components/notifications.tsx index c0a2cec57cb..766e16584d3 100644 --- a/apps/www/app/(app)/examples/cards/components/notifications.tsx +++ b/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() {
    - +

    Everything

    @@ -28,7 +28,7 @@ export function DemoNotifications() {

    - +

    Available

    @@ -37,7 +37,7 @@ export function DemoNotifications() {

    - +

    Ignoring

    diff --git a/apps/www/app/(app)/examples/cards/components/team-members.tsx b/apps/www/app/(app)/examples/cards/components/team-members.tsx index ff8d9a58176..52e841535a8 100644 --- a/apps/www/app/(app)/examples/cards/components/team-members.tsx +++ b/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() { @@ -105,8 +104,7 @@ export function DemoTeamMembers() { diff --git a/apps/www/app/(app)/examples/dashboard/components/date-range-picker.tsx b/apps/www/app/(app)/examples/dashboard/components/date-range-picker.tsx index 46238b12063..a4dd6ca2da0 100644 --- a/apps/www/app/(app)/examples/dashboard/components/date-range-picker.tsx +++ b/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" diff --git a/apps/www/app/(app)/examples/dashboard/components/team-switcher.tsx b/apps/www/app/(app)/examples/dashboard/components/team-switcher.tsx index 42c7af13240..8171046e7c5 100644 --- a/apps/www/app/(app)/examples/dashboard/components/team-switcher.tsx +++ b/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) { SC {selectedTeam.label} - + @@ -133,9 +129,9 @@ export default function TeamSwitcher({ className }: TeamSwitcherProps) { SC {team.label} - - + Create Team diff --git a/apps/www/app/(app)/examples/forms/account/account-form.tsx b/apps/www/app/(app)/examples/forms/account/account-form.tsx index a5862b4b210..0eed6c44ebc 100644 --- a/apps/www/app/(app)/examples/forms/account/account-form.tsx +++ b/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"} - + @@ -192,9 +192,9 @@ export function AccountForm() { form.setValue("language", language.value) }} > - System - +

    Set the font you want to use in the dashboard. diff --git a/apps/www/app/(app)/examples/music/components/album-artwork.tsx b/apps/www/app/(app)/examples/music/components/album-artwork.tsx index a226c83bcc5..8cdc5e2a262 100644 --- a/apps/www/app/(app)/examples/music/components/album-artwork.tsx +++ b/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({ Add to Playlist - + New Playlist diff --git a/apps/www/app/(app)/examples/music/page.tsx b/apps/www/app/(app)/examples/music/page.tsx index 40960c6b180..5321ccc41d8 100644 --- a/apps/www/app/(app)/examples/music/page.tsx +++ b/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() {
    diff --git a/apps/www/app/(app)/examples/playground/components/model-selector.tsx b/apps/www/app/(app)/examples/playground/components/model-selector.tsx index fb669827d07..1269069e650 100644 --- a/apps/www/app/(app)/examples/playground/components/model-selector.tsx +++ b/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..."} - + @@ -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} - ) diff --git a/apps/www/app/(app)/examples/playground/components/preset-actions.tsx b/apps/www/app/(app)/examples/playground/components/preset-actions.tsx index 8fb6aa115b3..9b57241a045 100644 --- a/apps/www/app/(app)/examples/playground/components/preset-actions.tsx +++ b/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() { <> - diff --git a/apps/www/app/(app)/examples/playground/components/preset-selector.tsx b/apps/www/app/(app)/examples/playground/components/preset-selector.tsx index eefb4b06d5d..f8a99beb95c 100644 --- a/apps/www/app/(app)/examples/playground/components/preset-selector.tsx +++ b/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..."} - + @@ -61,9 +61,9 @@ export function PresetSelector({ presets, ...props }: PresetSelectorProps) { }} > {preset.name} -
    diff --git a/apps/www/app/(app)/examples/playground/page.tsx b/apps/www/app/(app)/examples/playground/page.tsx index 0ab59665ae5..6d046508f3d 100644 --- a/apps/www/app/(app)/examples/playground/page.tsx +++ b/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() {
    @@ -283,7 +283,7 @@ export default function PlaygroundPage() {
    @@ -314,7 +314,7 @@ export default function PlaygroundPage() {
    diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-column-header.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-column-header.tsx index 7df71bb4a12..389c53c4ced 100644 --- a/apps/www/app/(app)/examples/tasks/components/data-table-column-header.tsx +++ b/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({ > {title} {column.getIsSorted() === "desc" ? ( - + ) : column.getIsSorted() === "asc" ? ( - + ) : ( - + )} column.toggleSorting(false)}> - + Asc column.toggleSorting(true)}> - + Desc column.toggleVisibility(false)}> - + Hide diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx index b1a975fd7a9..d39bd53ea61 100644 --- a/apps/www/app/(app)/examples/tasks/components/data-table-faceted-filter.tsx +++ b/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({ diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-row-actions.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-row-actions.tsx index 2dfa8cd2069..8546b2a38ad 100644 --- a/apps/www/app/(app)/examples/tasks/components/data-table-row-actions.tsx +++ b/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({ variant="ghost" className="flex h-8 w-8 p-0 data-[state=open]:bg-muted" > - + Open menu diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-toolbar.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-toolbar.tsx index 10bd91aee2a..a3a87b11c38 100644 --- a/apps/www/app/(app)/examples/tasks/components/data-table-toolbar.tsx +++ b/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({ className="h-8 px-2 lg:px-3" > Reset - + )} diff --git a/apps/www/app/(app)/examples/tasks/components/data-table-view-options.tsx b/apps/www/app/(app)/examples/tasks/components/data-table-view-options.tsx index 270bd8edf16..d7fe8776590 100644 --- a/apps/www/app/(app)/examples/tasks/components/data-table-view-options.tsx +++ b/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({ size="sm" className="ml-auto hidden h-8 lg:flex" > - + View diff --git a/apps/www/app/(app)/examples/tasks/data/data.tsx b/apps/www/app/(app)/examples/tasks/data/data.tsx index a507982f623..c4792ba82c2 100644 --- a/apps/www/app/(app)/examples/tasks/data/data.tsx +++ b/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, }, ] diff --git a/apps/www/components/announcement.tsx b/apps/www/components/announcement.tsx index e70b00745bf..cafbc1710fc 100644 --- a/apps/www/components/announcement.tsx +++ b/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" > - {" "} + {" "} {" "} New sidebar component - + ) } diff --git a/apps/www/components/command-menu.tsx b/apps/www/components/command-menu.tsx index 6ffed599821..9d8b1d868ec 100644 --- a/apps/www/components/command-menu.tsx +++ b/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)) }} > - + {navItem.title} ))} @@ -103,7 +97,7 @@ export function CommandMenu({ ...props }: DialogProps) { }} >
    - +
    {navItem.title} @@ -113,15 +107,15 @@ export function CommandMenu({ ...props }: DialogProps) { runCommand(() => setTheme("light"))}> - + Light runCommand(() => setTheme("dark"))}> - + Dark runCommand(() => setTheme("system"))}> - + System diff --git a/apps/www/components/examples-nav.tsx b/apps/www/components/examples-nav.tsx index 3a70efc7ede..75fa28eafb6 100644 --- a/apps/www/components/examples-nav.tsx +++ b/apps/www/components/examples-nav.tsx @@ -2,7 +2,7 @@ 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" @@ -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 - + ) } diff --git a/apps/www/components/pager.tsx b/apps/www/components/pager.tsx index 7c90cfbc60c..bb304120353 100644 --- a/apps/www/components/pager.tsx +++ b/apps/www/components/pager.tsx @@ -1,6 +1,6 @@ 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" @@ -22,7 +22,7 @@ export function DocsPager({ doc }: DocsPagerProps) { {pager?.prev?.href && ( @@ -31,7 +31,7 @@ export function DocsPager({ doc }: DocsPagerProps) { )} diff --git a/apps/www/components/theme-customizer.tsx b/apps/www/components/theme-customizer.tsx index efbc66d6c29..d457ded0c48 100644 --- a/apps/www/components/theme-customizer.tsx +++ b/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 && ( - - )} + {isActive && } {baseColor.label} @@ -191,7 +182,7 @@ function Customizer() { }) }} > - + Reset @@ -201,7 +192,7 @@ function Customizer() { - + About styles - {isActive && } + {isActive && } {theme.label} @@ -334,7 +325,7 @@ function Customizer() { onClick={() => setMode("light")} className={cn(mode === "light" && "border-2 border-primary")} > - + Light @@ -391,11 +382,7 @@ function CopyCodeButton({ className={cn("md:hidden", className)} {...props} > - {hasCopied ? ( - - ) : ( - - )} + {hasCopied ? : } Copy code )} @@ -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 ? ( - - ) : ( - - )} + {hasCopied ? : } Copy )} diff --git a/apps/www/content/docs/installation/manual.mdx b/apps/www/content/docs/installation/manual.mdx index 4625b2cde47..1a51e81cf51 100644 --- a/apps/www/content/docs/installation/manual.mdx +++ b/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: diff --git a/apps/www/public/r/styles/new-york/dropdown-menu.json b/apps/www/public/r/styles/new-york/dropdown-menu.json index 50f3f0a7dbd..5b63fcc0dd5 100644 --- a/apps/www/public/r/styles/new-york/dropdown-menu.json +++ b/apps/www/public/r/styles/new-york/dropdown-menu.json @@ -7,7 +7,7 @@ "files": [ { "path": "ui/dropdown-menu.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => (\n \n {children}\n \n \n))\nDropdownMenuSubTrigger.displayName =\n DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDropdownMenuSubContent.displayName =\n DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, sideOffset = 4, ...props }, ref) => (\n \n \n \n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n svg]:size-4 [&>svg]:shrink-0\",\n inset && \"pl-8\",\n className\n )}\n {...props}\n />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, checked, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nDropdownMenuCheckboxItem.displayName =\n DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuRadioGroup,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst DropdownMenu = DropdownMenuPrimitive.Root\n\nconst DropdownMenuTrigger = DropdownMenuPrimitive.Trigger\n\nconst DropdownMenuGroup = DropdownMenuPrimitive.Group\n\nconst DropdownMenuPortal = DropdownMenuPrimitive.Portal\n\nconst DropdownMenuSub = DropdownMenuPrimitive.Sub\n\nconst DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup\n\nconst DropdownMenuSubTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => (\n \n {children}\n \n \n))\nDropdownMenuSubTrigger.displayName =\n DropdownMenuPrimitive.SubTrigger.displayName\n\nconst DropdownMenuSubContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDropdownMenuSubContent.displayName =\n DropdownMenuPrimitive.SubContent.displayName\n\nconst DropdownMenuContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, sideOffset = 4, ...props }, ref) => (\n \n \n \n))\nDropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName\n\nconst DropdownMenuItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n svg]:size-4 [&>svg]:shrink-0\",\n inset && \"pl-8\",\n className\n )}\n {...props}\n />\n))\nDropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName\n\nconst DropdownMenuCheckboxItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, checked, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nDropdownMenuCheckboxItem.displayName =\n DropdownMenuPrimitive.CheckboxItem.displayName\n\nconst DropdownMenuRadioItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n))\nDropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName\n\nconst DropdownMenuLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n \n))\nDropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName\n\nconst DropdownMenuSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n))\nDropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName\n\nconst DropdownMenuShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes) => {\n return (\n \n )\n}\nDropdownMenuShortcut.displayName = \"DropdownMenuShortcut\"\n\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuRadioGroup,\n}\n", "type": "registry:ui", "target": "" } diff --git a/apps/www/registry/new-york/ui/dropdown-menu.tsx b/apps/www/registry/new-york/ui/dropdown-menu.tsx index e6c536d80e0..082639fb595 100644 --- a/apps/www/registry/new-york/ui/dropdown-menu.tsx +++ b/apps/www/registry/new-york/ui/dropdown-menu.tsx @@ -131,7 +131,7 @@ const DropdownMenuRadioItem = React.forwardRef< > - + {children} From 98ccd7389c3986a569544c3a990301906376c341 Mon Sep 17 00:00:00 2001 From: shadcn Date: Mon, 4 Nov 2024 16:20:51 +0400 Subject: [PATCH 11/16] feat: update migration script --- .../src/migrations/migrate-icons.test.ts | 158 ++++++++++++++++++ .../shadcn/src/migrations/migrate-icons.ts | 20 +-- vitest.workspace.ts | 3 + 3 files changed, 164 insertions(+), 17 deletions(-) create mode 100644 packages/shadcn/src/migrations/migrate-icons.test.ts create mode 100644 vitest.workspace.ts diff --git a/packages/shadcn/src/migrations/migrate-icons.test.ts b/packages/shadcn/src/migrations/migrate-icons.test.ts new file mode 100644 index 00000000000..3cd52f35489 --- /dev/null +++ b/packages/shadcn/src/migrations/migrate-icons.test.ts @@ -0,0 +1,158 @@ +import { describe, expect, it } from "vitest" + +import { migrateIconsFile } from "./migrate-icons" + +describe("migrateIconsFile", () => { + it("should replace radix icons with lucide icons", async () => { + const input = ` + import { CheckIcon, CloseIcon } from "@radix-ui/react-icons" + import { Something } from "other-package" + + export function Component() { + return ( +
    + + +
    + ) + }` + + expect( + await migrateIconsFile(input, "radix", "lucide", { + Check: { + lucide: "Check", + radix: "CheckIcon", + }, + X: { + lucide: "X", + radix: "CloseIcon", + }, + }) + ).toMatchInlineSnapshot(` + "import { Something } from "other-package" + import { Check, X } from "lucide-react"; + + export function Component() { + return ( +
    + + +
    + ) + }" + `) + }) + + it("should return null if no radix icons are found", async () => { + const input = ` + import { Something } from "other-package" + + export function Component() { + return
    No icons here
    + }` + + expect(await migrateIconsFile(input, "lucide", "radix", {})) + .toMatchInlineSnapshot(` + "import { Something } from "other-package" + + export function Component() { + return
    No icons here
    + }" + `) + }) + + it("should handle mixed icon imports from different packages", async () => { + const input = ` + import { CheckIcon } from "@radix-ui/react-icons" + import { AlertCircle } from "lucide-react" + import { Something } from "other-package" + import { Cross2Icon } from "@radix-ui/react-icons" + + export function Component() { + return ( +
    + + + +
    + ) + }` + + expect( + await migrateIconsFile(input, "radix", "lucide", { + Check: { + lucide: "Check", + radix: "CheckIcon", + }, + X: { + lucide: "X", + radix: "Cross2Icon", + }, + }) + ).toMatchInlineSnapshot(` + "import { AlertCircle } from "lucide-react" + import { Something } from "other-package" + import { Check, X } from "lucide-react"; + + export function Component() { + return ( +
    + + + +
    + ) + }" + `) + }) + + it("should preserve all props and children on icons", async () => { + const input = ` + import { CheckIcon, Cross2Icon } from "@radix-ui/react-icons" + + export function Component() { + return ( +
    + + Child content + + +
    + ) + }` + + expect( + await migrateIconsFile(input, "radix", "lucide", { + Check: { + lucide: "Check", + radix: "CheckIcon", + }, + X: { + lucide: "X", + radix: "Cross2Icon", + }, + }) + ).toMatchInlineSnapshot(` + "import { Check, X } from "lucide-react"; + + export function Component() { + return ( +
    + + Child content + + +
    + ) + }" + `) + }) +}) diff --git a/packages/shadcn/src/migrations/migrate-icons.ts b/packages/shadcn/src/migrations/migrate-icons.ts index c3c76552c76..fce708dd351 100644 --- a/packages/shadcn/src/migrations/migrate-icons.ts +++ b/packages/shadcn/src/migrations/migrate-icons.ts @@ -3,7 +3,6 @@ import { promises as fs } from "fs" import { tmpdir } from "os" import path from "path" import { Config } from "@/src/utils/get-config" -import { getPackageInfo } from "@/src/utils/get-package-info" import { highlighter } from "@/src/utils/highlighter" import { logger } from "@/src/utils/logger" import { getRegistryIcons } from "@/src/utils/registry" @@ -39,10 +38,6 @@ export async function migrateIcons(config: Config) { throw new Error("Something went wrong fetching the registry icons.") } - const packageInfo = getPackageInfo(config.resolvedPaths.cwd) - - const projectIconLibraries = packageInfo ? _getIconLibraries(packageInfo) : [] - const libraryChoices = Object.entries(iconLibraries).map( ([name, packageName]) => ({ title: packageName, @@ -50,15 +45,6 @@ export async function migrateIcons(config: Config) { }) ) - let initialSourceLibrary = projectIconLibraries.includes( - "@radix-ui/react-icons" - ) - ? libraryChoices.findIndex((choice) => choice.value === "radix") - : 0 - let initialTargetLibrary = projectIconLibraries.includes("lucide-react") - ? libraryChoices.findIndex((choice) => choice.value === "lucide") - : 0 - const migrateOptions = await prompts([ { type: "select", @@ -66,8 +52,8 @@ export async function migrateIcons(config: Config) { message: `Which icon library would you like to ${highlighter.info( "migrate from" )}?`, - choices: libraryChoices, - initial: initialSourceLibrary, + choices: [...libraryChoices].reverse(), + initial: 0, }, { type: "select", @@ -76,7 +62,7 @@ export async function migrateIcons(config: Config) { "migrate to" )}?`, choices: libraryChoices, - initial: initialTargetLibrary, + initial: 0, }, ]) diff --git a/vitest.workspace.ts b/vitest.workspace.ts new file mode 100644 index 00000000000..83509f47148 --- /dev/null +++ b/vitest.workspace.ts @@ -0,0 +1,3 @@ +import { defineWorkspace } from "vitest/config" + +export default defineWorkspace(["./vitest.config.ts"]) From 60a791aa29d97f7d97740a8038b42993a29fca5d Mon Sep 17 00:00:00 2001 From: shadcn Date: Mon, 4 Nov 2024 16:23:09 +0400 Subject: [PATCH 12/16] chore: update changeset --- .changeset/tame-falcons-beg.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/tame-falcons-beg.md b/.changeset/tame-falcons-beg.md index f3e00fb6e89..9bff373a859 100644 --- a/.changeset/tame-falcons-beg.md +++ b/.changeset/tame-falcons-beg.md @@ -3,4 +3,4 @@ "shadcn-ui": patch --- -update icons handling +move new-york icons to lucide-react From 990b9d261e21da492d74f1ed59338d9c047aff1a Mon Sep 17 00:00:00 2001 From: shadcn Date: Mon, 4 Nov 2024 22:45:44 +0400 Subject: [PATCH 13/16] feat(shadcn): implement icons transformer --- apps/www/public/schema.json | 3 + packages/shadcn/src/commands/info.ts | 20 ++++++ packages/shadcn/src/commands/init.ts | 1 + packages/shadcn/src/index.ts | 8 ++- .../shadcn/src/migrations/migrate-icons.ts | 37 ++++------ packages/shadcn/src/utils/get-config.ts | 6 ++ packages/shadcn/src/utils/get-project-info.ts | 1 + packages/shadcn/src/utils/icon-libraries.ts | 4 ++ .../shadcn/src/utils/transformers/index.ts | 4 +- .../src/utils/transformers/transform-icons.ts | 70 +++++++++++++++++++ .../shadcn/src/utils/updaters/update-files.ts | 9 ++- .../test/fixtures/config-full/components.json | 3 +- .../test/fixtures/config-jsx/components.json | 3 +- packages/shadcn/test/utils/get-config.test.ts | 3 + 14 files changed, 145 insertions(+), 27 deletions(-) create mode 100644 packages/shadcn/src/commands/info.ts create mode 100644 packages/shadcn/src/utils/icon-libraries.ts create mode 100644 packages/shadcn/src/utils/transformers/transform-icons.ts diff --git a/apps/www/public/schema.json b/apps/www/public/schema.json index 4d3e0ae64d9..8b89e39b5c1 100644 --- a/apps/www/public/schema.json +++ b/apps/www/public/schema.json @@ -33,6 +33,9 @@ "tsx": { "type": "boolean" }, + "iconLibrary": { + "type": "string" + }, "aliases": { "type": "object", "properties": { diff --git a/packages/shadcn/src/commands/info.ts b/packages/shadcn/src/commands/info.ts new file mode 100644 index 00000000000..ce79cb21cab --- /dev/null +++ b/packages/shadcn/src/commands/info.ts @@ -0,0 +1,20 @@ +import { getConfig } from "@/src/utils/get-config" +import { getProjectInfo } from "@/src/utils/get-project-info" +import { logger } from "@/src/utils/logger" +import { Command } from "commander" + +export const info = new Command() + .name("info") + .description("get information about your project") + .option( + "-c, --cwd ", + "the working directory. defaults to the current directory.", + process.cwd() + ) + .action(async (opts) => { + logger.info("> project info") + console.log(await getProjectInfo(opts.cwd)) + logger.break() + logger.info("> components.json") + console.log(await getConfig(opts.cwd)) + }) diff --git a/packages/shadcn/src/commands/init.ts b/packages/shadcn/src/commands/init.ts index 74dc410f11f..0cb280cb574 100644 --- a/packages/shadcn/src/commands/init.ts +++ b/packages/shadcn/src/commands/init.ts @@ -333,5 +333,6 @@ async function promptForMinimalConfig( rsc: defaultConfig?.rsc, tsx: defaultConfig?.tsx, aliases: defaultConfig?.aliases, + iconLibrary: defaultConfig?.iconLibrary, }) } diff --git a/packages/shadcn/src/index.ts b/packages/shadcn/src/index.ts index a6903dce330..8db7ad6c71e 100644 --- a/packages/shadcn/src/index.ts +++ b/packages/shadcn/src/index.ts @@ -1,6 +1,7 @@ #!/usr/bin/env node import { add } from "@/src/commands/add" import { diff } from "@/src/commands/diff" +import { info } from "@/src/commands/info" import { init } from "@/src/commands/init" import { migrate } from "@/src/commands/migrate" import { Command } from "commander" @@ -20,7 +21,12 @@ async function main() { "display the version number" ) - program.addCommand(init).addCommand(add).addCommand(diff).addCommand(migrate) + program + .addCommand(init) + .addCommand(add) + .addCommand(diff) + .addCommand(migrate) + .addCommand(info) program.parse() } diff --git a/packages/shadcn/src/migrations/migrate-icons.ts b/packages/shadcn/src/migrations/migrate-icons.ts index fce708dd351..e4bc5481284 100644 --- a/packages/shadcn/src/migrations/migrate-icons.ts +++ b/packages/shadcn/src/migrations/migrate-icons.ts @@ -4,6 +4,7 @@ import { tmpdir } from "os" import path from "path" import { Config } from "@/src/utils/get-config" import { highlighter } from "@/src/utils/highlighter" +import { ICON_LIBRARIES } from "@/src/utils/icon-libraries" import { logger } from "@/src/utils/logger" import { getRegistryIcons } from "@/src/utils/registry" import { iconsSchema } from "@/src/utils/registry/schema" @@ -14,11 +15,6 @@ import { Project, ScriptKind, SyntaxKind } from "ts-morph" import { PackageJson } from "type-fest" import { z } from "zod" -export const iconLibraries = { - lucide: "lucide-react", - radix: "@radix-ui/react-icons", -} - export async function migrateIcons(config: Config) { if (!config.resolvedPaths.ui) { throw new Error( @@ -38,7 +34,7 @@ export async function migrateIcons(config: Config) { throw new Error("Something went wrong fetching the registry icons.") } - const libraryChoices = Object.entries(iconLibraries).map( + const libraryChoices = Object.entries(ICON_LIBRARIES).map( ([name, packageName]) => ({ title: packageName, value: name, @@ -74,17 +70,17 @@ export async function migrateIcons(config: Config) { if ( !( - migrateOptions.sourceLibrary in iconLibraries && - migrateOptions.targetLibrary in iconLibraries + migrateOptions.sourceLibrary in ICON_LIBRARIES && + migrateOptions.targetLibrary in ICON_LIBRARIES ) ) { throw new Error("Invalid icon library. Please choose a valid icon library.") } const sourceLibrary = - iconLibraries[migrateOptions.sourceLibrary as keyof typeof iconLibraries] + ICON_LIBRARIES[migrateOptions.sourceLibrary as keyof typeof ICON_LIBRARIES] const targetLibrary = - iconLibraries[migrateOptions.targetLibrary as keyof typeof iconLibraries] + ICON_LIBRARIES[migrateOptions.targetLibrary as keyof typeof ICON_LIBRARIES] const { confirm } = await prompts({ type: "confirm", @@ -129,12 +125,12 @@ export async function migrateIcons(config: Config) { export async function migrateIconsFile( content: string, - sourceLibrary: keyof typeof iconLibraries, - targetLibrary: keyof typeof iconLibraries, + sourceLibrary: keyof typeof ICON_LIBRARIES, + targetLibrary: keyof typeof ICON_LIBRARIES, iconsMapping: z.infer ) { - const sourceLibraryName = iconLibraries[sourceLibrary] - const targetLibraryName = iconLibraries[targetLibrary] + const sourceLibraryName = ICON_LIBRARIES[sourceLibrary] + const targetLibraryName = ICON_LIBRARIES[targetLibrary] const dir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-")) const project = new Project({ @@ -177,13 +173,10 @@ export async function migrateIconsFile( specifier.remove() // Replace with the targeted icon. - const jsxElements = sourceFile.getDescendantsOfKind( - SyntaxKind.JsxSelfClosingElement - ) - const iconElement = jsxElements.find( - (node) => node.getTagNameNode()?.getText() === iconName - ) - iconElement?.getTagNameNode()?.replaceWithText(targetedIcon) + sourceFile + .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement) + .filter((node) => node.getTagNameNode()?.getText() === iconName) + .forEach((node) => node.getTagNameNode()?.replaceWithText(targetedIcon)) } // If the named import is empty, remove the import declaration. @@ -205,7 +198,7 @@ export async function migrateIconsFile( } function _getIconLibraries(packageInfo: PackageJson) { - return Object.values(iconLibraries).filter( + return Object.values(ICON_LIBRARIES).filter( (library) => packageInfo.dependencies?.[library] || packageInfo.devDependencies?.[library] diff --git a/packages/shadcn/src/utils/get-config.ts b/packages/shadcn/src/utils/get-config.ts index fafb395015f..c82aa3c379e 100644 --- a/packages/shadcn/src/utils/get-config.ts +++ b/packages/shadcn/src/utils/get-config.ts @@ -38,6 +38,7 @@ export const rawConfigSchema = z lib: z.string().optional(), hooks: z.string().optional(), }), + iconLibrary: z.string().optional(), }) .strict() @@ -65,6 +66,11 @@ export async function getConfig(cwd: string) { return null } + // Set default icon library if not provided. + if (!config.iconLibrary) { + config.iconLibrary = config.style === "new-york" ? "radix" : "lucide" + } + return await resolveConfigPaths(cwd, config) } diff --git a/packages/shadcn/src/utils/get-project-info.ts b/packages/shadcn/src/utils/get-project-info.ts index cd1f47ce8fa..42047cf7303 100644 --- a/packages/shadcn/src/utils/get-project-info.ts +++ b/packages/shadcn/src/utils/get-project-info.ts @@ -233,6 +233,7 @@ export async function getProjectConfig( cssVariables: true, prefix: "", }, + iconLibrary: "lucide", aliases: { components: `${projectInfo.aliasPrefix}/components`, ui: `${projectInfo.aliasPrefix}/components/ui`, diff --git a/packages/shadcn/src/utils/icon-libraries.ts b/packages/shadcn/src/utils/icon-libraries.ts new file mode 100644 index 00000000000..687bcf8996d --- /dev/null +++ b/packages/shadcn/src/utils/icon-libraries.ts @@ -0,0 +1,4 @@ +export const ICON_LIBRARIES = { + lucide: "lucide-react", + radix: "@radix-ui/react-icons", +} diff --git a/packages/shadcn/src/utils/transformers/index.ts b/packages/shadcn/src/utils/transformers/index.ts index d8b447997ae..3057e66e46d 100644 --- a/packages/shadcn/src/utils/transformers/index.ts +++ b/packages/shadcn/src/utils/transformers/index.ts @@ -4,6 +4,7 @@ import path from "path" import { Config } from "@/src/utils/get-config" import { registryBaseColorSchema } from "@/src/utils/registry/schema" import { transformCssVars } from "@/src/utils/transformers/transform-css-vars" +import { transformIcons } from "@/src/utils/transformers/transform-icons" import { transformImport } from "@/src/utils/transformers/transform-import" import { transformJsx } from "@/src/utils/transformers/transform-jsx" import { transformRsc } from "@/src/utils/transformers/transform-rsc" @@ -42,6 +43,7 @@ export async function transform( transformRsc, transformCssVars, transformTwPrefixes, + transformIcons, ] ) { const tempFile = await createTempSourceFile(opts.filename) @@ -50,7 +52,7 @@ export async function transform( }) for (const transformer of transformers) { - transformer({ sourceFile, ...opts }) + await transformer({ sourceFile, ...opts }) } if (opts.transformJsx) { diff --git a/packages/shadcn/src/utils/transformers/transform-icons.ts b/packages/shadcn/src/utils/transformers/transform-icons.ts new file mode 100644 index 00000000000..d8504398117 --- /dev/null +++ b/packages/shadcn/src/utils/transformers/transform-icons.ts @@ -0,0 +1,70 @@ +import { ICON_LIBRARIES } from "@/src/utils/icon-libraries" +import { getRegistryIcons } from "@/src/utils/registry" +import { Transformer } from "@/src/utils/transformers" +import { SyntaxKind } from "ts-morph" + +// Lucide is the default icon library in the registry. +const SOURCE_LIBRARY = "lucide" + +export const transformIcons: Transformer = async ({ sourceFile, config }) => { + // No transform if we cannot read the icon library. + if (!config.iconLibrary || !(config.iconLibrary in ICON_LIBRARIES)) { + return sourceFile + } + + const registryIcons = await getRegistryIcons() + const sourceLibrary = SOURCE_LIBRARY + const targetLibrary = config.iconLibrary + + if (sourceLibrary === targetLibrary) { + return sourceFile + } + + let targetedIcons: string[] = [] + for (const importDeclaration of sourceFile.getImportDeclarations() ?? []) { + if ( + importDeclaration.getModuleSpecifier()?.getText() !== + `"${ICON_LIBRARIES[SOURCE_LIBRARY]}"` + ) { + continue + } + + for (const specifier of importDeclaration.getNamedImports() ?? []) { + const iconName = specifier.getName() + + const targetedIcon = registryIcons[iconName][targetLibrary] + + if (!targetedIcon) { + continue + } + + targetedIcons.push(targetedIcon) + + // Remove the named import. + specifier.remove() + + // Replace with the targeted icon. + sourceFile + .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement) + .filter((node) => node.getTagNameNode()?.getText() === iconName) + .forEach((node) => node.getTagNameNode()?.replaceWithText(targetedIcon)) + } + + // If the named import is empty, remove the import declaration. + if (importDeclaration.getNamedImports()?.length === 0) { + importDeclaration.remove() + } + } + + if (targetedIcons.length > 0) { + sourceFile.addImportDeclaration({ + moduleSpecifier: + ICON_LIBRARIES[targetLibrary as keyof typeof ICON_LIBRARIES], + namedImports: targetedIcons.map((icon) => ({ + name: icon, + })), + }) + } + + return sourceFile +} diff --git a/packages/shadcn/src/utils/updaters/update-files.ts b/packages/shadcn/src/utils/updaters/update-files.ts index 3a06110e562..57ec6389ca5 100644 --- a/packages/shadcn/src/utils/updaters/update-files.ts +++ b/packages/shadcn/src/utils/updaters/update-files.ts @@ -12,6 +12,7 @@ import { RegistryItem } from "@/src/utils/registry/schema" import { spinner } from "@/src/utils/spinner" import { transform } from "@/src/utils/transformers" import { transformCssVars } from "@/src/utils/transformers/transform-css-vars" +import { transformIcons } from "@/src/utils/transformers/transform-icons" import { transformImport } from "@/src/utils/transformers/transform-import" import { transformRsc } from "@/src/utils/transformers/transform-rsc" import { transformTwPrefixes } from "@/src/utils/transformers/transform-tw-prefix" @@ -114,7 +115,13 @@ export async function updateFiles( baseColor, transformJsx: !config.tsx, }, - [transformImport, transformRsc, transformCssVars, transformTwPrefixes] + [ + transformImport, + transformRsc, + transformCssVars, + transformTwPrefixes, + transformIcons, + ] ) await fs.writeFile(filePath, content, "utf-8") diff --git a/packages/shadcn/test/fixtures/config-full/components.json b/packages/shadcn/test/fixtures/config-full/components.json index b27c6981578..b7e6404d072 100644 --- a/packages/shadcn/test/fixtures/config-full/components.json +++ b/packages/shadcn/test/fixtures/config-full/components.json @@ -14,5 +14,6 @@ "lib": "~/lib", "hooks": "~/lib/hooks", "ui": "~/ui" - } + }, + "iconLibrary": "lucide" } diff --git a/packages/shadcn/test/fixtures/config-jsx/components.json b/packages/shadcn/test/fixtures/config-jsx/components.json index 92b1f5e029b..e805bc288dd 100644 --- a/packages/shadcn/test/fixtures/config-jsx/components.json +++ b/packages/shadcn/test/fixtures/config-jsx/components.json @@ -10,5 +10,6 @@ "aliases": { "utils": "@/lib/utils", "components": "@/components" - } + }, + "iconLibrary": "radix" } diff --git a/packages/shadcn/test/utils/get-config.test.ts b/packages/shadcn/test/utils/get-config.test.ts index c55473db698..a783ac7e220 100644 --- a/packages/shadcn/test/utils/get-config.test.ts +++ b/packages/shadcn/test/utils/get-config.test.ts @@ -86,6 +86,7 @@ test("get config", async () => { hooks: path.resolve(__dirname, "../fixtures/config-partial", "./hooks"), lib: path.resolve(__dirname, "../fixtures/config-partial", "./lib"), }, + iconLibrary: "lucide", }) expect( @@ -108,6 +109,7 @@ test("get config", async () => { hooks: "~/lib/hooks", ui: "~/ui", }, + iconLibrary: "lucide", resolvedPaths: { cwd: path.resolve(__dirname, "../fixtures/config-full"), tailwindConfig: path.resolve( @@ -156,6 +158,7 @@ test("get config", async () => { components: "@/components", utils: "@/lib/utils", }, + iconLibrary: "radix", resolvedPaths: { cwd: path.resolve(__dirname, "../fixtures/config-jsx"), tailwindConfig: path.resolve( From 6557a9ad8a0bce21f596d338ebd17ef288d2da06 Mon Sep 17 00:00:00 2001 From: shadcn Date: Mon, 4 Nov 2024 23:49:50 +0400 Subject: [PATCH 14/16] fix: missing registry icons --- apps/www/__registry__/icons.tsx | 12 ++++++++++++ apps/www/public/r/icons/index.json | 4 ++++ apps/www/registry/registry-icons.ts | 4 ++++ 3 files changed, 20 insertions(+) diff --git a/apps/www/__registry__/icons.tsx b/apps/www/__registry__/icons.tsx index 3f8f721ffe6..3c8f028fcb3 100644 --- a/apps/www/__registry__/icons.tsx +++ b/apps/www/__registry__/icons.tsx @@ -304,6 +304,18 @@ export const Icons = { })) ), }, + 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) => ({ diff --git a/apps/www/public/r/icons/index.json b/apps/www/public/r/icons/index.json index 9fbcb863ef1..bf65dca463d 100644 --- a/apps/www/public/r/icons/index.json +++ b/apps/www/public/r/icons/index.json @@ -99,6 +99,10 @@ "lucide": "MoreHorizontal", "radix": "DotsHorizontalIcon" }, + "PanelLeft": { + "lucide": "PanelLeft", + "radix": "ViewVerticalIcon" + }, "Plus": { "lucide": "Plus", "radix": "PlusIcon" diff --git a/apps/www/registry/registry-icons.ts b/apps/www/registry/registry-icons.ts index 1f2fe0ceaf7..6ab6d3b23ee 100644 --- a/apps/www/registry/registry-icons.ts +++ b/apps/www/registry/registry-icons.ts @@ -107,6 +107,10 @@ export const icons: Record< lucide: "MoreHorizontal", radix: "DotsHorizontalIcon", }, + PanelLeft: { + lucide: "PanelLeft", + radix: "ViewVerticalIcon", + }, Plus: { lucide: "Plus", radix: "PlusIcon", From 5d6e4e84de030fb06258e61437c6ca7344bec3b6 Mon Sep 17 00:00:00 2001 From: shadcn Date: Tue, 5 Nov 2024 14:41:10 +0400 Subject: [PATCH 15/16] fix(shadcn): handling of missing icons --- packages/shadcn/src/utils/transformers/transform-icons.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/shadcn/src/utils/transformers/transform-icons.ts b/packages/shadcn/src/utils/transformers/transform-icons.ts index d8504398117..cecbc98a0cb 100644 --- a/packages/shadcn/src/utils/transformers/transform-icons.ts +++ b/packages/shadcn/src/utils/transformers/transform-icons.ts @@ -32,7 +32,7 @@ export const transformIcons: Transformer = async ({ sourceFile, config }) => { for (const specifier of importDeclaration.getNamedImports() ?? []) { const iconName = specifier.getName() - const targetedIcon = registryIcons[iconName][targetLibrary] + const targetedIcon = registryIcons[iconName]?.[targetLibrary] if (!targetedIcon) { continue From 194354278c5e60fdb76911e038eda78c48fe6a72 Mon Sep 17 00:00:00 2001 From: shadcn Date: Tue, 5 Nov 2024 21:40:02 +0400 Subject: [PATCH 16/16] feat: add support for multiple libraries --- .../__registry__/default/block/_sink/page.tsx | 273 +++++++++++++ apps/www/__registry__/index.tsx | 24 ++ .../new-york/block/_sink/page.tsx | 273 +++++++++++++ apps/www/app/(app)/sink/layout.tsx | 27 -- apps/www/app/(app)/sink/new-york/page.tsx | 206 ---------- apps/www/app/(app)/sink/page.tsx | 210 ---------- .../{(app) => (internal)}/icons/layout.tsx | 0 .../app/{(app) => (internal)}/icons/page.tsx | 2 +- apps/www/app/(internal)/sink/page.tsx | 3 + apps/www/public/r/styles/default/_sink.json | 386 ++++++++++++++++++ .../public/r/styles/default/drawer-demo.json | 2 +- apps/www/public/r/styles/default/sink.json | 106 +++++ .../public/r/styles/default/sonner-demo.json | 2 +- apps/www/public/r/styles/default/toggle.json | 2 +- apps/www/public/r/styles/new-york/_sink.json | 386 ++++++++++++++++++ .../public/r/styles/new-york/drawer-demo.json | 2 +- .../r/styles/new-york/resizable-handle.json | 2 +- apps/www/public/r/styles/new-york/sink.json | 106 +++++ .../public/r/styles/new-york/sonner-demo.json | 2 +- .../public/r/styles/new-york/toggle-lg.json | 2 +- .../r/styles/new-york/toggle-outline.json | 2 +- .../public/r/styles/new-york/toggle-sm.json | 2 +- .../r/styles/new-york/toggle-with-text.json | 2 +- apps/www/public/r/styles/new-york/toggle.json | 2 +- .../block/_sink/components/accordion-demo.tsx | 32 ++ .../block/_sink/components/alert-demo.tsx | 19 + .../_sink/components/alert-dialog-demo.tsx | 35 ++ .../_sink/components/app-sidebar copy.tsx | 175 ++++++++ .../block/_sink/components/app-sidebar.tsx | 175 ++++++++ .../_sink/components/aspect-ratio-demo.tsx | 16 + .../block/_sink/components/avatar-demo.tsx | 14 + .../block/_sink/components/badge-demo.tsx | 5 + .../_sink/components/badge-destructive.tsx | 5 + .../block/_sink/components/badge-outline.tsx | 5 + .../_sink/components/badge-secondary.tsx | 5 + .../_sink/components/breadcrumb-demo.tsx | 49 +++ .../_sink/components/button-demo copy.tsx | 5 + .../block/_sink/components/button-demo.tsx | 5 + .../_sink/components/button-destructive.tsx | 5 + .../block/_sink/components/button-ghost.tsx | 5 + .../block/_sink/components/button-icon.tsx | 11 + .../block/_sink/components/button-link.tsx | 5 + .../block/_sink/components/button-loading.tsx | 12 + .../block/_sink/components/button-outline.tsx | 5 + .../_sink/components/button-secondary.tsx | 5 + .../_sink/components/button-with-icon.tsx | 11 + .../block/_sink/components/calendar-demo.tsx | 18 + .../block/_sink/components/card-demo.tsx | 78 ++++ .../block/_sink/components/carousel-demo.tsx | 32 ++ .../block/_sink/components/checkbox-demo.tsx | 17 + .../_sink/components/collapsible-demo.tsx | 46 +++ .../block/_sink/components/combobox-demo.tsx | 94 +++++ .../block/_sink/components/command-demo.tsx | 62 +++ .../components/component-wrapper copy.tsx | 22 + .../_sink/components/component-wrapper.tsx | 22 + .../_sink/components/context-menu-demo.tsx | 67 +++ .../_sink/components/date-picker-demo.tsx | 43 ++ .../block/_sink/components/dialog-demo.tsx | 47 +++ .../block/_sink/components/drawer-demo.tsx | 136 ++++++ .../_sink/components/dropdown-menu-demo.tsx | 75 ++++ .../_sink/components/hover-card-demo.tsx | 43 ++ .../block/_sink/components/input-demo.tsx | 5 + .../block/_sink/components/input-otp-demo.tsx | 24 ++ .../block/_sink/components/label-demo.tsx | 13 + .../block/_sink/components/menubar-demo.tsx | 107 +++++ .../block/_sink/components/nav-main copy.tsx | 73 ++++ .../block/_sink/components/nav-main.tsx | 73 ++++ .../_sink/components/nav-projects copy.tsx | 89 ++++ .../block/_sink/components/nav-projects.tsx | 89 ++++ .../block/_sink/components/nav-user copy.tsx | 114 ++++++ .../block/_sink/components/nav-user.tsx | 114 ++++++ .../_sink/components/navigation-menu-demo.tsx | 143 +++++++ .../_sink/components/pagination-demo.tsx | 38 ++ .../block/_sink/components/popover-demo.tsx | 62 +++ .../block/_sink/components/progress-demo.tsx | 16 + .../_sink/components/radio-group-demo.tsx | 21 + .../_sink/components/resizable-handle.tsx | 26 ++ .../_sink/components/scroll-area-demo.tsx | 24 ++ .../block/_sink/components/select-demo.tsx | 31 ++ .../block/_sink/components/separator-demo.tsx | 22 + .../block/_sink/components/sheet-demo.tsx | 50 +++ .../block/_sink/components/skeleton-demo.tsx | 13 + .../block/_sink/components/slider-demo.tsx | 16 + .../block/_sink/components/sonner-demo.tsx | 24 ++ .../block/_sink/components/switch-demo.tsx | 11 + .../block/_sink/components/table-demo.tsx | 87 ++++ .../block/_sink/components/tabs-demo.tsx | 74 ++++ .../_sink/components/team-switcher copy.tsx | 89 ++++ .../block/_sink/components/team-switcher.tsx | 89 ++++ .../block/_sink/components/textarea-demo.tsx | 5 + .../block/_sink/components/toast-demo.tsx | 26 ++ .../block/_sink/components/toggle-demo.tsx | 11 + .../_sink/components/toggle-disabled.tsx | 11 + .../_sink/components/toggle-group-demo.tsx | 22 + .../block/_sink/components/toggle-outline.tsx | 11 + .../_sink/components/toggle-with-text.tsx | 12 + .../block/_sink/components/tooltip-demo.tsx | 22 + .../www/registry/default/block/_sink/page.tsx | 273 +++++++++++++ .../registry/default/example/drawer-demo.tsx | 2 + .../registry/default/example/sonner-demo.tsx | 2 + apps/www/registry/default/ui/toggle.tsx | 8 +- .../block/_sink/components/accordion-demo.tsx | 32 ++ .../block/_sink/components/alert-demo.tsx | 19 + .../_sink/components/alert-dialog-demo.tsx | 35 ++ .../_sink/components/app-sidebar copy.tsx | 175 ++++++++ .../block/_sink/components/app-sidebar.tsx | 175 ++++++++ .../_sink/components/aspect-ratio-demo.tsx | 16 + .../block/_sink/components/avatar-demo.tsx | 14 + .../block/_sink/components/badge-demo.tsx | 5 + .../_sink/components/badge-destructive.tsx | 5 + .../block/_sink/components/badge-outline.tsx | 5 + .../_sink/components/badge-secondary.tsx | 5 + .../_sink/components/breadcrumb-demo.tsx | 49 +++ .../_sink/components/button-demo copy.tsx | 5 + .../block/_sink/components/button-demo.tsx | 5 + .../_sink/components/button-destructive.tsx | 5 + .../block/_sink/components/button-ghost.tsx | 5 + .../block/_sink/components/button-icon.tsx | 11 + .../block/_sink/components/button-link.tsx | 5 + .../block/_sink/components/button-loading.tsx | 12 + .../block/_sink/components/button-outline.tsx | 5 + .../_sink/components/button-secondary.tsx | 5 + .../_sink/components/button-with-icon.tsx | 11 + .../block/_sink/components/calendar-demo.tsx | 18 + .../block/_sink/components/card-demo.tsx | 78 ++++ .../block/_sink/components/carousel-demo.tsx | 32 ++ .../block/_sink/components/checkbox-demo.tsx | 17 + .../_sink/components/collapsible-demo.tsx | 46 +++ .../block/_sink/components/combobox-demo.tsx | 94 +++++ .../block/_sink/components/command-demo.tsx | 62 +++ .../components/component-wrapper copy.tsx | 22 + .../_sink/components/component-wrapper.tsx | 22 + .../_sink/components/context-menu-demo.tsx | 67 +++ .../_sink/components/date-picker-demo.tsx | 43 ++ .../block/_sink/components/dialog-demo.tsx | 47 +++ .../block/_sink/components/drawer-demo.tsx | 136 ++++++ .../_sink/components/dropdown-menu-demo.tsx | 75 ++++ .../_sink/components/hover-card-demo.tsx | 43 ++ .../block/_sink/components/input-demo.tsx | 5 + .../block/_sink/components/input-otp-demo.tsx | 24 ++ .../block/_sink/components/label-demo.tsx | 13 + .../block/_sink/components/menubar-demo.tsx | 107 +++++ .../block/_sink/components/nav-main copy.tsx | 73 ++++ .../block/_sink/components/nav-main.tsx | 73 ++++ .../_sink/components/nav-projects copy.tsx | 89 ++++ .../block/_sink/components/nav-projects.tsx | 89 ++++ .../block/_sink/components/nav-user copy.tsx | 114 ++++++ .../block/_sink/components/nav-user.tsx | 114 ++++++ .../_sink/components/navigation-menu-demo.tsx | 143 +++++++ .../_sink/components/pagination-demo.tsx | 38 ++ .../block/_sink/components/popover-demo.tsx | 62 +++ .../block/_sink/components/progress-demo.tsx | 16 + .../_sink/components/radio-group-demo.tsx | 21 + .../_sink/components/resizable-handle.tsx | 26 ++ .../_sink/components/scroll-area-demo.tsx | 24 ++ .../block/_sink/components/select-demo.tsx | 31 ++ .../block/_sink/components/separator-demo.tsx | 22 + .../block/_sink/components/sheet-demo.tsx | 50 +++ .../block/_sink/components/skeleton-demo.tsx | 13 + .../block/_sink/components/slider-demo.tsx | 16 + .../block/_sink/components/sonner-demo.tsx | 24 ++ .../block/_sink/components/switch-demo.tsx | 11 + .../block/_sink/components/table-demo.tsx | 87 ++++ .../block/_sink/components/tabs-demo.tsx | 74 ++++ .../_sink/components/team-switcher copy.tsx | 89 ++++ .../block/_sink/components/team-switcher.tsx | 89 ++++ .../block/_sink/components/textarea-demo.tsx | 5 + .../block/_sink/components/toast-demo.tsx | 26 ++ .../block/_sink/components/toggle-demo.tsx | 11 + .../_sink/components/toggle-disabled.tsx | 11 + .../_sink/components/toggle-group-demo.tsx | 22 + .../block/_sink/components/toggle-outline.tsx | 11 + .../_sink/components/toggle-with-text.tsx | 12 + .../block/_sink/components/tooltip-demo.tsx | 22 + .../registry/new-york/block/_sink/page.tsx | 273 +++++++++++++ .../registry/new-york/example/drawer-demo.tsx | 2 + .../new-york/example/resizable-handle.tsx | 2 +- .../registry/new-york/example/sonner-demo.tsx | 2 + .../registry/new-york/example/toggle-lg.tsx | 2 +- .../new-york/example/toggle-outline.tsx | 2 +- .../registry/new-york/example/toggle-sm.tsx | 2 +- .../new-york/example/toggle-with-text.tsx | 2 +- apps/www/registry/new-york/ui/toggle.tsx | 8 +- apps/www/registry/registry-blocks.ts | 321 +++++++++++++++ apps/www/registry/registry-icons.ts | 12 +- apps/www/scripts/build-registry.mts | 2 +- .../shadcn/src/migrations/migrate-icons.ts | 39 +- packages/shadcn/src/utils/icon-libraries.ts | 12 +- .../transformers/transform-icons.test.ts | 140 +++++++ .../src/utils/transformers/transform-icons.ts | 22 +- 190 files changed, 8778 insertions(+), 500 deletions(-) create mode 100644 apps/www/__registry__/default/block/_sink/page.tsx create mode 100644 apps/www/__registry__/new-york/block/_sink/page.tsx delete mode 100644 apps/www/app/(app)/sink/layout.tsx delete mode 100644 apps/www/app/(app)/sink/new-york/page.tsx delete mode 100644 apps/www/app/(app)/sink/page.tsx rename apps/www/app/{(app) => (internal)}/icons/layout.tsx (100%) rename apps/www/app/{(app) => (internal)}/icons/page.tsx (95%) create mode 100644 apps/www/app/(internal)/sink/page.tsx create mode 100644 apps/www/public/r/styles/default/_sink.json create mode 100644 apps/www/public/r/styles/default/sink.json create mode 100644 apps/www/public/r/styles/new-york/_sink.json create mode 100644 apps/www/public/r/styles/new-york/sink.json create mode 100644 apps/www/registry/default/block/_sink/components/accordion-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/alert-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/alert-dialog-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/app-sidebar copy.tsx create mode 100644 apps/www/registry/default/block/_sink/components/app-sidebar.tsx create mode 100644 apps/www/registry/default/block/_sink/components/aspect-ratio-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/avatar-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/badge-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/badge-destructive.tsx create mode 100644 apps/www/registry/default/block/_sink/components/badge-outline.tsx create mode 100644 apps/www/registry/default/block/_sink/components/badge-secondary.tsx create mode 100644 apps/www/registry/default/block/_sink/components/breadcrumb-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-demo copy.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-destructive.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-ghost.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-icon.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-link.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-loading.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-outline.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-secondary.tsx create mode 100644 apps/www/registry/default/block/_sink/components/button-with-icon.tsx create mode 100644 apps/www/registry/default/block/_sink/components/calendar-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/card-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/carousel-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/checkbox-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/collapsible-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/combobox-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/command-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/component-wrapper copy.tsx create mode 100644 apps/www/registry/default/block/_sink/components/component-wrapper.tsx create mode 100644 apps/www/registry/default/block/_sink/components/context-menu-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/date-picker-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/dialog-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/drawer-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/dropdown-menu-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/hover-card-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/input-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/input-otp-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/label-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/menubar-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/nav-main copy.tsx create mode 100644 apps/www/registry/default/block/_sink/components/nav-main.tsx create mode 100644 apps/www/registry/default/block/_sink/components/nav-projects copy.tsx create mode 100644 apps/www/registry/default/block/_sink/components/nav-projects.tsx create mode 100644 apps/www/registry/default/block/_sink/components/nav-user copy.tsx create mode 100644 apps/www/registry/default/block/_sink/components/nav-user.tsx create mode 100644 apps/www/registry/default/block/_sink/components/navigation-menu-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/pagination-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/popover-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/progress-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/radio-group-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/resizable-handle.tsx create mode 100644 apps/www/registry/default/block/_sink/components/scroll-area-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/select-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/separator-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/sheet-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/skeleton-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/slider-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/sonner-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/switch-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/table-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/tabs-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/team-switcher copy.tsx create mode 100644 apps/www/registry/default/block/_sink/components/team-switcher.tsx create mode 100644 apps/www/registry/default/block/_sink/components/textarea-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/toast-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/toggle-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/toggle-disabled.tsx create mode 100644 apps/www/registry/default/block/_sink/components/toggle-group-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/components/toggle-outline.tsx create mode 100644 apps/www/registry/default/block/_sink/components/toggle-with-text.tsx create mode 100644 apps/www/registry/default/block/_sink/components/tooltip-demo.tsx create mode 100644 apps/www/registry/default/block/_sink/page.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/accordion-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/alert-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/alert-dialog-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/app-sidebar copy.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/app-sidebar.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/aspect-ratio-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/avatar-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/badge-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/badge-destructive.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/badge-outline.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/badge-secondary.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/breadcrumb-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-demo copy.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-destructive.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-ghost.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-icon.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-link.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-loading.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-outline.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-secondary.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/button-with-icon.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/calendar-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/card-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/carousel-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/checkbox-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/collapsible-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/combobox-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/command-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/component-wrapper copy.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/component-wrapper.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/context-menu-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/date-picker-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/dialog-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/drawer-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/dropdown-menu-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/hover-card-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/input-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/input-otp-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/label-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/menubar-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/nav-main copy.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/nav-main.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/nav-projects copy.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/nav-projects.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/nav-user copy.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/nav-user.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/navigation-menu-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/pagination-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/popover-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/progress-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/radio-group-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/resizable-handle.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/scroll-area-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/select-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/separator-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/sheet-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/skeleton-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/slider-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/sonner-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/switch-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/table-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/tabs-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/team-switcher copy.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/team-switcher.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/textarea-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/toast-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/toggle-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/toggle-disabled.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/toggle-group-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/toggle-outline.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/toggle-with-text.tsx create mode 100644 apps/www/registry/new-york/block/_sink/components/tooltip-demo.tsx create mode 100644 apps/www/registry/new-york/block/_sink/page.tsx create mode 100644 packages/shadcn/src/utils/transformers/transform-icons.test.ts diff --git a/apps/www/__registry__/default/block/_sink/page.tsx b/apps/www/__registry__/default/block/_sink/page.tsx new file mode 100644 index 00000000000..6ed2f8841ed --- /dev/null +++ b/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 ( + + + +
    +
    + + + + + + + Building Your Application + + + + + Data Fetching + + + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + +
    +
    + + + +
    +
    + +
    +     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + +
    +     + + + + + + +
    +
    +     +     + ) +} diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx index c4d78e46f74..eb5dd3ddc30 100644 --- a/apps/www/__registry__/index.tsx +++ b/apps/www/__registry__/index.tsx @@ -2501,6 +2501,18 @@ export const Index: Record = { 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 = { 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.", diff --git a/apps/www/__registry__/new-york/block/_sink/page.tsx b/apps/www/__registry__/new-york/block/_sink/page.tsx new file mode 100644 index 00000000000..ccbeec18681 --- /dev/null +++ b/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 ( + + + +
    +
    + + + + + + + Building Your Application + + + + + Data Fetching + + + +
    +
    +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + +
    +
    + + + +
    +
    + +
    +     + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + + + + +
    +     + + + + + + +
    +
    +     +     + ) +} diff --git a/apps/www/app/(app)/sink/layout.tsx b/apps/www/app/(app)/sink/layout.tsx deleted file mode 100644 index 70da365c39f..00000000000 --- a/apps/www/app/(app)/sink/layout.tsx +++ /dev/null @@ -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 ( -
    -
    -
    - {styles.map((style) => ( - - {style.label} - - ))} -
    -
    -
    - {children} -
    -
    - ) -} diff --git a/apps/www/app/(app)/sink/new-york/page.tsx b/apps/www/app/(app)/sink/new-york/page.tsx deleted file mode 100644 index f7897d193d3..00000000000 --- a/apps/www/app/(app)/sink/new-york/page.tsx +++ /dev/null @@ -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 ( -
    -
    -
    -
    - - - - - - - -

    Documentation

    -

    - You can customize the theme using{" "} - - CSS variables - - .{" "} - - Click here - {" "} - to learn more. -

    -     - - - - - - - -
    -
    - - - - - -
    - - - -
    -
    - - - -
    -
    - - -
    -
    - - -
    -     - - - - - - - - - - - - - - - - - - - - - - - -
    -
    - - - - - - - - - - - - - -
    - - - -
    -     - -
    - - - - -
    -     - - - - - - - -
    - - - - -
    -     - - - -
    -
    -
    -
    - ) -} - -function ComponentWrapper({ - className, - children, -}: React.HTMLAttributes) { - return ( -
    - {children} -
    - ) -} diff --git a/apps/www/app/(app)/sink/page.tsx b/apps/www/app/(app)/sink/page.tsx deleted file mode 100644 index 9533913922a..00000000000 --- a/apps/www/app/(app)/sink/page.tsx +++ /dev/null @@ -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 ( -
    -
    -
    -
    - - - - - - - -

    Documentation

    -

    - You can customize the theme using{" "} - - CSS variables - - .{" "} - - Click here - {" "} - to learn more. -

    -     - - - - - - - -
    -
    - - - - - -
    - - - -
    -
    - - - -
    -
    - - -
    -
    - - -
    -     - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    - - - - - - - - - - - - - -
    - - - -
    -     - -
    - - - - -
    -     - - - - - - - -
    - - - - -
    -     - - - -
    -
    -
    -
    - ) -} - -function ComponentWrapper({ - className, - children, -}: React.HTMLAttributes) { - return ( -
    - {children} -
    - ) -} diff --git a/apps/www/app/(app)/icons/layout.tsx b/apps/www/app/(internal)/icons/layout.tsx similarity index 100% rename from apps/www/app/(app)/icons/layout.tsx rename to apps/www/app/(internal)/icons/layout.tsx diff --git a/apps/www/app/(app)/icons/page.tsx b/apps/www/app/(internal)/icons/page.tsx similarity index 95% rename from apps/www/app/(app)/icons/page.tsx rename to apps/www/app/(internal)/icons/page.tsx index 8b1d6f6a0e6..635426d32c6 100644 --- a/apps/www/app/(app)/icons/page.tsx +++ b/apps/www/app/(internal)/icons/page.tsx @@ -22,7 +22,7 @@ export default function IconsPage() { name - {Object.values(iconLibraries).map((library) => ( + {Object.keys(iconLibraries).map((library) => ( {library} ))} diff --git a/apps/www/app/(internal)/sink/page.tsx b/apps/www/app/(internal)/sink/page.tsx new file mode 100644 index 00000000000..bd291db322a --- /dev/null +++ b/apps/www/app/(internal)/sink/page.tsx @@ -0,0 +1,3 @@ +import SinkPage from "@/registry/new-york/block/_sink/page" + +export default SinkPage diff --git a/apps/www/public/r/styles/default/_sink.json b/apps/www/public/r/styles/default/_sink.json new file mode 100644 index 00000000000..771a993e93e --- /dev/null +++ b/apps/www/public/r/styles/default/_sink.json @@ -0,0 +1,386 @@ +{ + "name": "_sink", + "type": "registry:block", + "description": "", + "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": "block/_sink/page.tsx", + "content": "import { AccordionDemo } from \"@/registry/default/block/_sink/components/accordion-demo\"\nimport { AlertDemo } from \"@/registry/default/block/_sink/components/alert-demo\"\nimport { AlertDialogDemo } from \"@/registry/default/block/_sink/components/alert-dialog-demo\"\nimport { AppSidebar } from \"@/registry/default/block/_sink/components/app-sidebar\"\nimport { AspectRatioDemo } from \"@/registry/default/block/_sink/components/aspect-ratio-demo\"\nimport { AvatarDemo } from \"@/registry/default/block/_sink/components/avatar-demo\"\nimport { BadgeDemo } from \"@/registry/default/block/_sink/components/badge-demo\"\nimport { BadgeDestructive } from \"@/registry/default/block/_sink/components/badge-destructive\"\nimport { BadgeOutline } from \"@/registry/default/block/_sink/components/badge-outline\"\nimport { BadgeSecondary } from \"@/registry/default/block/_sink/components/badge-secondary\"\nimport { BreadcrumbDemo } from \"@/registry/default/block/_sink/components/breadcrumb-demo\"\nimport { ButtonDemo } from \"@/registry/default/block/_sink/components/button-demo\"\nimport { ButtonDestructive } from \"@/registry/default/block/_sink/components/button-destructive\"\nimport { ButtonGhost } from \"@/registry/default/block/_sink/components/button-ghost\"\nimport { ButtonLink } from \"@/registry/default/block/_sink/components/button-link\"\nimport { ButtonLoading } from \"@/registry/default/block/_sink/components/button-loading\"\nimport { ButtonOutline } from \"@/registry/default/block/_sink/components/button-outline\"\nimport { ButtonSecondary } from \"@/registry/default/block/_sink/components/button-secondary\"\nimport { ButtonWithIcon } from \"@/registry/default/block/_sink/components/button-with-icon\"\nimport { CalendarDemo } from \"@/registry/default/block/_sink/components/calendar-demo\"\nimport { CardDemo } from \"@/registry/default/block/_sink/components/card-demo\"\nimport { CarouselDemo } from \"@/registry/default/block/_sink/components/carousel-demo\"\nimport { CheckboxDemo } from \"@/registry/default/block/_sink/components/checkbox-demo\"\nimport { CollapsibleDemo } from \"@/registry/default/block/_sink/components/collapsible-demo\"\nimport { ComboboxDemo } from \"@/registry/default/block/_sink/components/combobox-demo\"\nimport { CommandDemo } from \"@/registry/default/block/_sink/components/command-demo\"\nimport { ComponentWrapper } from \"@/registry/default/block/_sink/components/component-wrapper\"\nimport { ContextMenuDemo } from \"@/registry/default/block/_sink/components/context-menu-demo\"\nimport { DatePickerDemo } from \"@/registry/default/block/_sink/components/date-picker-demo\"\nimport { DialogDemo } from \"@/registry/default/block/_sink/components/dialog-demo\"\nimport { DrawerDemo } from \"@/registry/default/block/_sink/components/drawer-demo\"\nimport { DropdownMenuDemo } from \"@/registry/default/block/_sink/components/dropdown-menu-demo\"\nimport { HoverCardDemo } from \"@/registry/default/block/_sink/components/hover-card-demo\"\nimport { InputDemo } from \"@/registry/default/block/_sink/components/input-demo\"\nimport { InputOTPDemo } from \"@/registry/default/block/_sink/components/input-otp-demo\"\nimport { LabelDemo } from \"@/registry/default/block/_sink/components/label-demo\"\nimport { MenubarDemo } from \"@/registry/default/block/_sink/components/menubar-demo\"\nimport { NavigationMenuDemo } from \"@/registry/default/block/_sink/components/navigation-menu-demo\"\nimport { PaginationDemo } from \"@/registry/default/block/_sink/components/pagination-demo\"\nimport { PopoverDemo } from \"@/registry/default/block/_sink/components/popover-demo\"\nimport { ProgressDemo } from \"@/registry/default/block/_sink/components/progress-demo\"\nimport { RadioGroupDemo } from \"@/registry/default/block/_sink/components/radio-group-demo\"\nimport { ResizableHandleDemo } from \"@/registry/default/block/_sink/components/resizable-handle\"\nimport { ScrollAreaDemo } from \"@/registry/default/block/_sink/components/scroll-area-demo\"\nimport { SelectDemo } from \"@/registry/default/block/_sink/components/select-demo\"\nimport { SeparatorDemo } from \"@/registry/default/block/_sink/components/separator-demo\"\nimport { SheetDemo } from \"@/registry/default/block/_sink/components/sheet-demo\"\nimport { SkeletonDemo } from \"@/registry/default/block/_sink/components/skeleton-demo\"\nimport { SliderDemo } from \"@/registry/default/block/_sink/components/slider-demo\"\nimport { SonnerDemo } from \"@/registry/default/block/_sink/components/sonner-demo\"\nimport { SwitchDemo } from \"@/registry/default/block/_sink/components/switch-demo\"\nimport { TableDemo } from \"@/registry/default/block/_sink/components/table-demo\"\nimport { TabsDemo } from \"@/registry/default/block/_sink/components/tabs-demo\"\nimport { TextareaDemo } from \"@/registry/default/block/_sink/components/textarea-demo\"\nimport { ToastDemo } from \"@/registry/default/block/_sink/components/toast-demo\"\nimport { ToggleDemo } from \"@/registry/default/block/_sink/components/toggle-demo\"\nimport { ToggleDisabled } from \"@/registry/default/block/_sink/components/toggle-disabled\"\nimport { ToggleGroupDemo } from \"@/registry/default/block/_sink/components/toggle-group-demo\"\nimport { ToggleOutline } from \"@/registry/default/block/_sink/components/toggle-outline\"\nimport { ToggleWithText } from \"@/registry/default/block/_sink/components/toggle-with-text\"\nimport { TooltipDemo } from \"@/registry/default/block/_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": "block/_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/block/sidebar-07/components/nav-main\"\nimport { NavProjects } from \"@/registry/default/block/sidebar-07/components/nav-projects\"\nimport { NavUser } from \"@/registry/default/block/sidebar-07/components/nav-user\"\nimport { TeamSwitcher } from \"@/registry/default/block/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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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 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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_sink/components/button-demo.tsx", + "content": "import { Button } from \"@/registry/default/ui/button\"\n\nexport function ButtonDemo() {\n return \n}\n", + "type": "registry:component" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_sink/components/input-demo.tsx", + "content": "import { Input } from \"@/registry/default/ui/input\"\n\nexport function InputDemo() {\n return \n}\n", + "type": "registry:component" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_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" + }, + { + "path": "block/_sink/components/textarea-demo.tsx", + "content": "import { Textarea } from \"@/registry/default/ui/textarea\"\n\nexport function TextareaDemo() {\n return