From caadc3d7e8b8c995aeaf1e071084fc1f2cc8a5a6 Mon Sep 17 00:00:00 2001 From: shadcn Date: Fri, 23 Jan 2026 20:35:04 +0400 Subject: [PATCH] feat: update new-york-v4 components to match new styles (#9434) --- .../sink/components/alert-dialog-demo.tsx | 82 ++- .../sink/components/avatar-demo.tsx | 204 +++++-- .../(internal)/sink/components/badge-demo.tsx | 14 + .../sink/components/button-demo.tsx | 65 ++- .../sink/components/combobox-demo.tsx | 526 +++++------------- .../sink/components/popover-demo.tsx | 99 ++-- .../(internal)/sink/components/sheet-demo.tsx | 21 + .../sink/components/switch-demo.tsx | 11 + .../(internal)/sink/components/tabs-demo.tsx | 39 ++ .../r/styles/new-york-v4/alert-dialog.json | 2 +- .../public/r/styles/new-york-v4/avatar.json | 2 +- .../v4/public/r/styles/new-york-v4/badge.json | 2 +- .../public/r/styles/new-york-v4/button.json | 2 +- .../public/r/styles/new-york-v4/combobox.json | 19 + .../public/r/styles/new-york-v4/dialog.json | 2 +- .../public/r/styles/new-york-v4/popover.json | 2 +- .../public/r/styles/new-york-v4/registry.json | 17 + .../v4/public/r/styles/new-york-v4/sheet.json | 2 +- .../public/r/styles/new-york-v4/switch.json | 2 +- apps/v4/public/r/styles/new-york-v4/tabs.json | 2 +- apps/v4/registry/__index__.tsx | 19 + apps/v4/registry/new-york-v4/ui/_registry.ts | 12 + .../registry/new-york-v4/ui/alert-dialog.tsx | 85 ++- apps/v4/registry/new-york-v4/ui/avatar.tsx | 64 ++- apps/v4/registry/new-york-v4/ui/badge.tsx | 16 +- apps/v4/registry/new-york-v4/ui/button.tsx | 2 + apps/v4/registry/new-york-v4/ui/combobox.tsx | 16 +- apps/v4/registry/new-york-v4/ui/dialog.tsx | 19 +- apps/v4/registry/new-york-v4/ui/popover.tsx | 43 +- apps/v4/registry/new-york-v4/ui/sheet.tsx | 12 +- apps/v4/registry/new-york-v4/ui/switch.tsx | 10 +- apps/v4/registry/new-york-v4/ui/tabs.tsx | 41 +- apps/v4/scripts/build-registry.mts | 5 +- 33 files changed, 865 insertions(+), 594 deletions(-) create mode 100644 apps/v4/public/r/styles/new-york-v4/combobox.json diff --git a/apps/v4/app/(internal)/sink/components/alert-dialog-demo.tsx b/apps/v4/app/(internal)/sink/components/alert-dialog-demo.tsx index a9fe2a3511..7bd075cda8 100644 --- a/apps/v4/app/(internal)/sink/components/alert-dialog-demo.tsx +++ b/apps/v4/app/(internal)/sink/components/alert-dialog-demo.tsx @@ -1,3 +1,5 @@ +import { TrashIcon } from "lucide-react" + import { AlertDialog, AlertDialogAction, @@ -6,6 +8,7 @@ import { AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, + AlertDialogMedia, AlertDialogTitle, AlertDialogTrigger, } from "@/registry/new-york-v4/ui/alert-dialog" @@ -13,23 +16,66 @@ import { Button } from "@/registry/new-york-v4/ui/button" export function AlertDialogDemo() { return ( - - - - - - - Are you absolutely sure? - - This action cannot be undone. This will permanently delete your - account and remove your data from our servers. - - - - Cancel - Continue - - - +
+ + + + + + + Are you absolutely sure? + + This action cannot be undone. This will permanently delete your + account and remove your data from our servers. + + + + Cancel + Continue + + + + + + + + + + + + + Delete this item? + + This action cannot be undone. This will permanently delete the + item from your account. + + + + Cancel + Delete + + + + + + + + + + + + + Delete this item? + + This action cannot be undone. + + + + Cancel + Delete + + + +
) } diff --git a/apps/v4/app/(internal)/sink/components/avatar-demo.tsx b/apps/v4/app/(internal)/sink/components/avatar-demo.tsx index 461d1991c8..ffdf68de38 100644 --- a/apps/v4/app/(internal)/sink/components/avatar-demo.tsx +++ b/apps/v4/app/(internal)/sink/components/avatar-demo.tsx @@ -1,90 +1,174 @@ +import { PlusIcon } from "lucide-react" + import { Avatar, + AvatarBadge, AvatarFallback, + AvatarGroup, + AvatarGroupCount, AvatarImage, } from "@/registry/new-york-v4/ui/avatar" export function AvatarDemo() { return ( -
- - - CN - - - CN - - - - CN - - - - ER - -
- +
+ {/* Sizes. */} +
+ CN - - LR + + CN - - - ER + + + CN
-
- - + {/* Fallback. */} +
+ CN - - LR + CN - - - ER + + CN
-
+ {/* With badge. */} +
+ + + CN + + CN + - - - LR - - - - ER + + + CN + + +
+ {/* Avatar group. */} +
+ + + + CN + + + + ML + + + + ER + + + + + + CN + + + + ML + + + + ER + + + + + + CN + + + + ML + + + + ER + + +
+ {/* Avatar group with count. */} +
+ + + + CN + + + + ML + + + + ER + + +3 + + + + + CN + + + + ML + + + + ER + + + + + +
) } diff --git a/apps/v4/app/(internal)/sink/components/badge-demo.tsx b/apps/v4/app/(internal)/sink/components/badge-demo.tsx index 73acd07a3a..d98c5b44da 100644 --- a/apps/v4/app/(internal)/sink/components/badge-demo.tsx +++ b/apps/v4/app/(internal)/sink/components/badge-demo.tsx @@ -10,6 +10,10 @@ export function BadgeDemo() { Secondary Destructive Outline + Ghost + Link +
+
Badge @@ -55,6 +59,16 @@ export function BadgeDemo() { Link + + + Link + + + + + Link + +
) diff --git a/apps/v4/app/(internal)/sink/components/button-demo.tsx b/apps/v4/app/(internal)/sink/components/button-demo.tsx index 78cb85a888..f6a90626c0 100644 --- a/apps/v4/app/(internal)/sink/components/button-demo.tsx +++ b/apps/v4/app/(internal)/sink/components/button-demo.tsx @@ -1,4 +1,4 @@ -import { ArrowRightIcon, Loader2Icon, SendIcon } from "lucide-react" +import { ArrowRightIcon, Loader2Icon, PlusIcon, SendIcon } from "lucide-react" import { Button } from "@/registry/new-york-v4/ui/button" @@ -6,22 +6,25 @@ export function ButtonDemo() { return (
- - - - - - - + + + + + + - -
@@ -43,10 +46,21 @@ export function ButtonDemo() { -
+
+ + + + + + + + - @@ -71,12 +85,19 @@ export function ButtonDemo() { -
+
+ - + +
diff --git a/apps/v4/app/(internal)/sink/components/combobox-demo.tsx b/apps/v4/app/(internal)/sink/components/combobox-demo.tsx index edf693bb2f..51f945bc5a 100644 --- a/apps/v4/app/(internal)/sink/components/combobox-demo.tsx +++ b/apps/v4/app/(internal)/sink/components/combobox-demo.tsx @@ -1,405 +1,183 @@ "use client" import * as React from "react" -import { - CheckIcon, - ChevronDownIcon, - ChevronsUpDown, - PlusCircleIcon, -} from "lucide-react" -import { cn } from "@/lib/utils" -import { - Avatar, - AvatarFallback, - AvatarImage, -} from "@/registry/new-york-v4/ui/avatar" import { Button } from "@/registry/new-york-v4/ui/button" import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, - CommandList, - CommandSeparator, -} from "@/registry/new-york-v4/ui/command" -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/registry/new-york-v4/ui/popover" + Combobox, + ComboboxChip, + ComboboxChips, + ComboboxChipsInput, + ComboboxCollection, + ComboboxContent, + ComboboxEmpty, + ComboboxGroup, + ComboboxInput, + ComboboxItem, + ComboboxLabel, + ComboboxList, + ComboboxTrigger, + ComboboxValue, + useComboboxAnchor, +} from "@/registry/new-york-v4/ui/combobox" const frameworks = [ - { - value: "next.js", - label: "Next.js", - }, - { - value: "sveltekit", - label: "SvelteKit", - }, - { - value: "nuxt.js", - label: "Nuxt.js", - }, - { - value: "remix", - label: "Remix", - }, - { - value: "astro", - label: "Astro", - }, -] - -type Framework = (typeof frameworks)[number] - -const users = [ - { - id: "1", - username: "shadcn", - }, - { - id: "2", - username: "maxleiter", - }, - { - id: "3", - username: "evilrabbit", - }, + "Next.js", + "SvelteKit", + "Nuxt.js", + "Remix", + "Astro", ] as const -type User = (typeof users)[number] - const timezones = [ { - label: "Americas", - timezones: [ - { value: "America/New_York", label: "(GMT-5) New York" }, - { value: "America/Los_Angeles", label: "(GMT-8) Los Angeles" }, - { value: "America/Chicago", label: "(GMT-6) Chicago" }, - { value: "America/Toronto", label: "(GMT-5) Toronto" }, - { value: "America/Vancouver", label: "(GMT-8) Vancouver" }, - { value: "America/Sao_Paulo", label: "(GMT-3) São Paulo" }, - ], + value: "Americas", + items: ["(GMT-5) New York", "(GMT-8) Los Angeles", "(GMT-6) Chicago"], }, { - label: "Europe", - timezones: [ - { value: "Europe/London", label: "(GMT+0) London" }, - { value: "Europe/Paris", label: "(GMT+1) Paris" }, - { value: "Europe/Berlin", label: "(GMT+1) Berlin" }, - { value: "Europe/Rome", label: "(GMT+1) Rome" }, - { value: "Europe/Madrid", label: "(GMT+1) Madrid" }, - { value: "Europe/Amsterdam", label: "(GMT+1) Amsterdam" }, - ], + value: "Europe", + items: ["(GMT+0) London", "(GMT+1) Paris", "(GMT+1) Berlin"], }, { - label: "Asia/Pacific", - timezones: [ - { value: "Asia/Tokyo", label: "(GMT+9) Tokyo" }, - { value: "Asia/Shanghai", label: "(GMT+8) Shanghai" }, - { value: "Asia/Singapore", label: "(GMT+8) Singapore" }, - { value: "Asia/Dubai", label: "(GMT+4) Dubai" }, - { value: "Australia/Sydney", label: "(GMT+11) Sydney" }, - { value: "Asia/Seoul", label: "(GMT+9) Seoul" }, - ], + value: "Asia/Pacific", + items: ["(GMT+9) Tokyo", "(GMT+8) Shanghai", "(GMT+8) Singapore"], }, ] as const -type Timezone = (typeof timezones)[number] +const countries = [ + { code: "", value: "", label: "Select country" }, + { code: "us", value: "united-states", label: "United States" }, + { code: "ca", value: "canada", label: "Canada" }, + { code: "gb", value: "united-kingdom", label: "United Kingdom" }, + { code: "de", value: "germany", label: "Germany" }, + { code: "fr", value: "france", label: "France" }, + { code: "jp", value: "japan", label: "Japan" }, +] export function ComboboxDemo() { return ( -
- - - - +
+ {/* Basic combobox. */} +
+ + + + No items found. + + {(item) => ( + + {item} + + )} + + + +
+ {/* With clear button. */} +
+ + + + No items found. + + {(item) => ( + + {item} + + )} + + + +
+ {/* With groups. */} +
+ + + + No timezones found. + + {(group) => ( + + {group.value} + + {(item) => ( + + {item} + + )} + + + )} + + + +
+ {/* With trigger button. */} +
+ + + } + > + + + + + No items found. + + {(item) => ( + + {item.label} + + )} + + + +
+ {/* Multiple selection with chips. */} +
) } -function FrameworkCombobox({ frameworks }: { frameworks: Framework[] }) { - const [open, setOpen] = React.useState(false) - const [value, setValue] = React.useState("") +function ComboboxMultiple() { + const anchor = useComboboxAnchor() return ( - - - - - - - - - No framework found. - - {frameworks.map((framework) => ( - { - setValue(currentValue === value ? "" : currentValue) - setOpen(false) - }} - > - {framework.label} - - - ))} - - - - - - ) -} - -function UserCombobox({ - users, - selectedUserId, -}: { - users: User[] - selectedUserId: string -}) { - const [open, setOpen] = React.useState(false) - const [value, setValue] = React.useState(selectedUserId) - - const selectedUser = React.useMemo( - () => users.find((user) => user.id === value), - [value, users] - ) - - return ( - - - - - - - - - No user found. - - {users.map((user) => ( - { - setValue(currentValue === value ? "" : currentValue) - setOpen(false) - }} - > - - - {user.username[0]} - - {user.username} - - - ))} - - - - - - Create user - - - - - - - ) -} - -function TimezoneCombobox({ - timezones, - selectedTimezone, -}: { - timezones: Timezone[] - selectedTimezone: Timezone["timezones"][number] -}) { - const [open, setOpen] = React.useState(false) - const [value, setValue] = React.useState(selectedTimezone.value) - - const selectedGroup = React.useMemo( - () => - timezones.find((group) => - group.timezones.find((tz) => tz.value === value) - ), - [value, timezones] - ) - - const selectedTimezoneLabel = React.useMemo( - () => selectedGroup?.timezones.find((tz) => tz.value === value)?.label, - [value, selectedGroup] - ) - - return ( - - - - - - - - - No timezone found. - {timezones.map((region) => ( - - {region.timezones.map((timezone) => ( - { - setValue( - currentValue as Timezone["timezones"][number]["value"] - ) - setOpen(false) - }} - > - {timezone.label} - - +
+ + + + {(values) => ( + + {values.map((value: string) => ( + {value} ))} - - ))} - - - - - Create timezone - - - - - - - ) -} - -function ComboboxWithCheckbox({ frameworks }: { frameworks: Framework[] }) { - const [open, setOpen] = React.useState(false) - const [selectedFrameworks, setSelectedFrameworks] = React.useState< - Framework[] - >([]) - - return ( - - - - - - - - - No framework found. - - {frameworks.map((framework) => ( - { - setSelectedFrameworks( - selectedFrameworks.some((f) => f.value === currentValue) - ? selectedFrameworks.filter( - (f) => f.value !== currentValue - ) - : [...selectedFrameworks, framework] - ) - }} - > -
f.value === framework.value - )} - > - -
- {framework.label} - - ))} - - - - - + + + )} + + + + No items found. + + {(item) => ( + + {item} + + )} + + + +
) } diff --git a/apps/v4/app/(internal)/sink/components/popover-demo.tsx b/apps/v4/app/(internal)/sink/components/popover-demo.tsx index 87329c1355..ef316de2d1 100644 --- a/apps/v4/app/(internal)/sink/components/popover-demo.tsx +++ b/apps/v4/app/(internal)/sink/components/popover-demo.tsx @@ -4,59 +4,64 @@ import { Label } from "@/registry/new-york-v4/ui/label" import { Popover, PopoverContent, + PopoverDescription, + PopoverHeader, + PopoverTitle, PopoverTrigger, } from "@/registry/new-york-v4/ui/popover" export function PopoverDemo() { return ( - - - - - -
-
-

Dimensions

-

- Set the dimensions for the layer. -

-
-
-
- - -
-
- - -
-
- - -
-
- - +
+ + + + + +
+ + Dimensions + + Set the dimensions for the layer. + + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
-
- - + + +
) } diff --git a/apps/v4/app/(internal)/sink/components/sheet-demo.tsx b/apps/v4/app/(internal)/sink/components/sheet-demo.tsx index 694ce65835..10eb5494a4 100644 --- a/apps/v4/app/(internal)/sink/components/sheet-demo.tsx +++ b/apps/v4/app/(internal)/sink/components/sheet-demo.tsx @@ -47,6 +47,27 @@ export function SheetDemo() { + + + + + + + Custom Close + + This sheet has no default close button. Use the footer buttons + instead. + + +
+ + + + + + + +
{SHEET_SIDES.map((side) => ( diff --git a/apps/v4/app/(internal)/sink/components/switch-demo.tsx b/apps/v4/app/(internal)/sink/components/switch-demo.tsx index bd4cf82cb4..ed6db09954 100644 --- a/apps/v4/app/(internal)/sink/components/switch-demo.tsx +++ b/apps/v4/app/(internal)/sink/components/switch-demo.tsx @@ -4,6 +4,17 @@ import { Switch } from "@/registry/new-york-v4/ui/switch" export function SwitchDemo() { return (
+ {/* Sizes. */} +
+
+ + +
+
+ + +
+
diff --git a/apps/v4/app/(internal)/sink/components/tabs-demo.tsx b/apps/v4/app/(internal)/sink/components/tabs-demo.tsx index b54b5492b2..7388730c97 100644 --- a/apps/v4/app/(internal)/sink/components/tabs-demo.tsx +++ b/apps/v4/app/(internal)/sink/components/tabs-demo.tsx @@ -101,6 +101,45 @@ export function TabsDemo() { + {/* Line variant. */} + + + + + Preview + + + + Code + + + + {/* Vertical orientation. */} + + + + + Preview + + + + Code + + + + {/* Vertical orientation with line variant. */} + + + + + Preview + + + + Code + + +
) } diff --git a/apps/v4/public/r/styles/new-york-v4/alert-dialog.json b/apps/v4/public/r/styles/new-york-v4/alert-dialog.json index 442e0113a3..50356ee1ce 100644 --- a/apps/v4/public/r/styles/new-york-v4/alert-dialog.json +++ b/apps/v4/public/r/styles/new-york-v4/alert-dialog.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/new-york-v4/ui/alert-dialog.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/registry/new-york-v4/ui/button\"\n\nfunction AlertDialog({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction AlertDialogTrigger({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogPortal({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogOverlay({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n )\n}\n\nfunction AlertDialogHeader({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogAction({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogCancel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n AlertDialog,\n AlertDialogPortal,\n AlertDialogOverlay,\n AlertDialogTrigger,\n AlertDialogContent,\n AlertDialogHeader,\n AlertDialogFooter,\n AlertDialogTitle,\n AlertDialogDescription,\n AlertDialogAction,\n AlertDialogCancel,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nfunction AlertDialog({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction AlertDialogTrigger({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogPortal({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogOverlay({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogContent({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps & {\n size?: \"default\" | \"sm\"\n}) {\n return (\n \n \n \n \n )\n}\n\nfunction AlertDialogHeader({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AlertDialogMedia({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AlertDialogAction({\n className,\n variant = \"default\",\n size = \"default\",\n ...props\n}: React.ComponentProps &\n Pick, \"variant\" | \"size\">) {\n return (\n \n )\n}\n\nfunction AlertDialogCancel({\n className,\n variant = \"outline\",\n size = \"default\",\n ...props\n}: React.ComponentProps &\n Pick, \"variant\" | \"size\">) {\n return (\n \n )\n}\n\nexport {\n AlertDialog,\n AlertDialogAction,\n AlertDialogCancel,\n AlertDialogContent,\n AlertDialogDescription,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogMedia,\n AlertDialogOverlay,\n AlertDialogPortal,\n AlertDialogTitle,\n AlertDialogTrigger,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/avatar.json b/apps/v4/public/r/styles/new-york-v4/avatar.json index 8a9d8468da..4f824161e8 100644 --- a/apps/v4/public/r/styles/new-york-v4/avatar.json +++ b/apps/v4/public/r/styles/new-york-v4/avatar.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/ui/avatar.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Avatar({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AvatarImage({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Avatar, AvatarImage, AvatarFallback }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Avatar({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps & {\n size?: \"default\" | \"sm\" | \"lg\"\n}) {\n return (\n \n )\n}\n\nfunction AvatarImage({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AvatarFallback({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction AvatarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n return (\n svg]:hidden\",\n \"group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2\",\n \"group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction AvatarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction AvatarGroupCount({\n className,\n ...props\n}: React.ComponentProps<\"div\">) {\n return (\n svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3\",\n className\n )}\n {...props}\n />\n )\n}\n\nexport {\n Avatar,\n AvatarImage,\n AvatarFallback,\n AvatarBadge,\n AvatarGroup,\n AvatarGroupCount,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/badge.json b/apps/v4/public/r/styles/new-york-v4/badge.json index dde2981eec..aaf2da0043 100644 --- a/apps/v4/public/r/styles/new-york-v4/badge.json +++ b/apps/v4/public/r/styles/new-york-v4/badge.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/ui/badge.tsx", - "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n {\n variants: {\n variant: {\n default:\n \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n secondary:\n \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n destructive:\n \"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Badge({\n className,\n variant,\n asChild = false,\n ...props\n}: React.ComponentProps<\"span\"> &\n VariantProps & { asChild?: boolean }) {\n const Comp = asChild ? Slot : \"span\"\n\n return (\n \n )\n}\n\nexport { Badge, badgeVariants }\n", + "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n \"inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n secondary:\n \"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n destructive:\n \"bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n ghost: \"[a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 [a&]:hover:underline\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction Badge({\n className,\n variant = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"span\"> &\n VariantProps & { asChild?: boolean }) {\n const Comp = asChild ? Slot : \"span\"\n\n return (\n \n )\n}\n\nexport { Badge, badgeVariants }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/button.json b/apps/v4/public/r/styles/new-york-v4/button.json index 02d341ae64..58d46ed174 100644 --- a/apps/v4/public/r/styles/new-york-v4/button.json +++ b/apps/v4/public/r/styles/new-york-v4/button.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/ui/button.tsx", - "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost:\n \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n icon: \"size-9\",\n \"icon-sm\": \"size-8\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot : \"button\"\n\n return (\n \n )\n}\n\nexport { Button, buttonVariants }\n", + "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n outline:\n \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost:\n \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n xs: \"h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3\",\n sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n icon: \"size-9\",\n \"icon-xs\": \"size-6 rounded-md [&_svg:not([class*='size-'])]:size-3\",\n \"icon-sm\": \"size-8\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot : \"button\"\n\n return (\n \n )\n}\n\nexport { Button, buttonVariants }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/combobox.json b/apps/v4/public/r/styles/new-york-v4/combobox.json new file mode 100644 index 0000000000..ef0cd04f8f --- /dev/null +++ b/apps/v4/public/r/styles/new-york-v4/combobox.json @@ -0,0 +1,19 @@ +{ + "$schema": "https://ui.shadcn.com/schema/registry-item.json", + "name": "combobox", + "dependencies": [ + "@base-ui/react" + ], + "registryDependencies": [ + "button", + "input-group" + ], + "files": [ + { + "path": "registry/new-york-v4/ui/combobox.tsx", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\nimport { CheckIcon, ChevronDownIcon, XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n} from \"@/registry/new-york-v4/ui/input-group\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n return \n}\n\nfunction ComboboxTrigger({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Trigger.Props) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n return (\n }\n className={cn(className)}\n {...props}\n >\n \n \n )\n}\n\nfunction ComboboxInput({\n className,\n children,\n disabled = false,\n showTrigger = true,\n showClear = false,\n ...props\n}: ComboboxPrimitive.Input.Props & {\n showTrigger?: boolean\n showClear?: boolean\n}) {\n return (\n \n }\n {...props}\n />\n \n {showTrigger && (\n \n \n \n )}\n {showClear && }\n \n {children}\n \n )\n}\n\nfunction ComboboxContent({\n className,\n side = \"bottom\",\n sideOffset = 6,\n align = \"start\",\n alignOffset = 0,\n anchor,\n ...props\n}: ComboboxPrimitive.Popup.Props &\n Pick<\n ComboboxPrimitive.Positioner.Props,\n \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n >) {\n return (\n \n \n \n \n \n )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n return (\n \n )\n}\n\nfunction ComboboxItem({\n className,\n children,\n ...props\n}: ComboboxPrimitive.Item.Props) {\n return (\n \n {children}\n \n }\n >\n \n \n \n )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n return (\n \n )\n}\n\nfunction ComboboxLabel({\n className,\n ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n return (\n \n )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n return (\n \n )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n return (\n
\n )\n}\n\nfunction DialogTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/popover.json b/apps/v4/public/r/styles/new-york-v4/popover.json index dcfc4c9f77..a16c35c410 100644 --- a/apps/v4/public/r/styles/new-york-v4/popover.json +++ b/apps/v4/public/r/styles/new-york-v4/popover.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/ui/popover.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Popover({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction PopoverTrigger({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction PopoverContent({\n className,\n align = \"center\",\n sideOffset = 4,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction PopoverAnchor({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Popover({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction PopoverTrigger({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction PopoverContent({\n className,\n align = \"center\",\n sideOffset = 4,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction PopoverAnchor({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n return (\n \n )\n}\n\nfunction PopoverDescription({\n className,\n ...props\n}: React.ComponentProps<\"p\">) {\n return (\n \n )\n}\n\nexport {\n Popover,\n PopoverTrigger,\n PopoverContent,\n PopoverAnchor,\n PopoverHeader,\n PopoverTitle,\n PopoverDescription,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/registry.json b/apps/v4/public/r/styles/new-york-v4/registry.json index e707a9b1da..060c70c1e9 100644 --- a/apps/v4/public/r/styles/new-york-v4/registry.json +++ b/apps/v4/public/r/styles/new-york-v4/registry.json @@ -238,6 +238,23 @@ ], "type": "registry:ui" }, + { + "name": "combobox", + "dependencies": [ + "@base-ui/react" + ], + "registryDependencies": [ + "button", + "input-group" + ], + "files": [ + { + "path": "registry/new-york-v4/ui/combobox.tsx", + "type": "registry:ui" + } + ], + "type": "registry:ui" + }, { "name": "command", "dependencies": [ diff --git a/apps/v4/public/r/styles/new-york-v4/sheet.json b/apps/v4/public/r/styles/new-york-v4/sheet.json index e58372b89b..9dfb6672b4 100644 --- a/apps/v4/public/r/styles/new-york-v4/sheet.json +++ b/apps/v4/public/r/styles/new-york-v4/sheet.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/ui/sheet.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SheetPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Sheet({ ...props }: React.ComponentProps) {\n return \n}\n\nfunction SheetTrigger({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SheetClose({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SheetPortal({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SheetContent({\n className,\n children,\n side = \"right\",\n ...props\n}: React.ComponentProps & {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n return (\n \n \n \n {children}\n \n \n Close\n \n \n \n )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction SheetTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n Sheet,\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 { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Sheet({ ...props }: React.ComponentProps) {\n return \n}\n\nfunction SheetTrigger({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SheetClose({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SheetPortal({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SheetContent({\n className,\n children,\n side = \"right\",\n showCloseButton = true,\n ...props\n}: React.ComponentProps & {\n side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n showCloseButton?: boolean\n}) {\n return (\n \n \n \n {children}\n {showCloseButton && (\n \n \n Close\n \n )}\n \n \n )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction SheetTitle({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n Sheet,\n SheetTrigger,\n SheetClose,\n SheetContent,\n SheetHeader,\n SheetFooter,\n SheetTitle,\n SheetDescription,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/switch.json b/apps/v4/public/r/styles/new-york-v4/switch.json index d4f6c68465..72b629277c 100644 --- a/apps/v4/public/r/styles/new-york-v4/switch.json +++ b/apps/v4/public/r/styles/new-york-v4/switch.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/ui/switch.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Switch({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nexport { Switch }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Switch({\n className,\n size = \"default\",\n ...props\n}: React.ComponentProps & {\n size?: \"sm\" | \"default\"\n}) {\n return (\n \n \n \n )\n}\n\nexport { Switch }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/tabs.json b/apps/v4/public/r/styles/new-york-v4/tabs.json index c4d1bdab67..86f8b88bcc 100644 --- a/apps/v4/public/r/styles/new-york-v4/tabs.json +++ b/apps/v4/public/r/styles/new-york-v4/tabs.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/ui/tabs.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction TabsList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction TabsTrigger({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction TabsContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n className,\n orientation = \"horizontal\",\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst tabsListVariants = cva(\n \"rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col\",\n {\n variants: {\n variant: {\n default: \"bg-muted\",\n line: \"gap-1 bg-transparent\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n },\n }\n)\n\nfunction TabsList({\n className,\n variant = \"default\",\n ...props\n}: React.ComponentProps &\n VariantProps) {\n return (\n \n )\n}\n\nfunction TabsTrigger({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction TabsContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n", "type": "registry:ui" } ], diff --git a/apps/v4/registry/__index__.tsx b/apps/v4/registry/__index__.tsx index b2e6993edd..735358e104 100644 --- a/apps/v4/registry/__index__.tsx +++ b/apps/v4/registry/__index__.tsx @@ -290,6 +290,25 @@ export const Index: Record> = { categories: undefined, meta: undefined, }, + "combobox": { + name: "combobox", + title: "undefined", + description: "", + type: "registry:ui", + registryDependencies: ["button","input-group"], + files: [{ + path: "registry/new-york-v4/ui/combobox.tsx", + type: "registry:ui", + target: "" + }], + component: React.lazy(async () => { + const mod = await import("@/registry/new-york-v4/ui/combobox.tsx") + const exportName = Object.keys(mod).find(key => typeof mod[key] === 'function' || typeof mod[key] === 'object') || item.name + return { default: mod.default || mod[exportName] } + }), + categories: undefined, + meta: undefined, + }, "command": { name: "command", title: "undefined", diff --git a/apps/v4/registry/new-york-v4/ui/_registry.ts b/apps/v4/registry/new-york-v4/ui/_registry.ts index 7fdb7d62cb..4d7b03743b 100644 --- a/apps/v4/registry/new-york-v4/ui/_registry.ts +++ b/apps/v4/registry/new-york-v4/ui/_registry.ts @@ -168,6 +168,18 @@ export const ui: Registry["items"] = [ }, ], }, + { + name: "combobox", + type: "registry:ui", + dependencies: ["@base-ui/react"], + registryDependencies: ["button", "input-group"], + files: [ + { + path: "ui/combobox.tsx", + type: "registry:ui", + }, + ], + }, { name: "command", type: "registry:ui", diff --git a/apps/v4/registry/new-york-v4/ui/alert-dialog.tsx b/apps/v4/registry/new-york-v4/ui/alert-dialog.tsx index ea8465ca40..2f53fd2ba5 100644 --- a/apps/v4/registry/new-york-v4/ui/alert-dialog.tsx +++ b/apps/v4/registry/new-york-v4/ui/alert-dialog.tsx @@ -4,7 +4,7 @@ import * as React from "react" import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" import { cn } from "@/lib/utils" -import { buttonVariants } from "@/registry/new-york-v4/ui/button" +import { Button } from "@/registry/new-york-v4/ui/button" function AlertDialog({ ...props @@ -46,15 +46,19 @@ function AlertDialogOverlay({ function AlertDialogContent({ className, + size = "default", ...props -}: React.ComponentProps) { +}: React.ComponentProps & { + size?: "default" | "sm" +}) { return ( ) @@ -84,7 +91,7 @@ function AlertDialogFooter({
) @@ -118,40 +128,69 @@ function AlertDialogDescription({ ) } -function AlertDialogAction({ +function AlertDialogMedia({ className, ...props -}: React.ComponentProps) { +}: React.ComponentProps<"div">) { return ( - ) } +function AlertDialogAction({ + className, + variant = "default", + size = "default", + ...props +}: React.ComponentProps & + Pick, "variant" | "size">) { + return ( + + ) +} + function AlertDialogCancel({ className, + variant = "outline", + size = "default", ...props -}: React.ComponentProps) { +}: React.ComponentProps & + Pick, "variant" | "size">) { return ( - + ) } export { AlertDialog, - AlertDialogPortal, - AlertDialogOverlay, - AlertDialogTrigger, - AlertDialogContent, - AlertDialogHeader, - AlertDialogFooter, - AlertDialogTitle, - AlertDialogDescription, AlertDialogAction, AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogMedia, + AlertDialogOverlay, + AlertDialogPortal, + AlertDialogTitle, + AlertDialogTrigger, } diff --git a/apps/v4/registry/new-york-v4/ui/avatar.tsx b/apps/v4/registry/new-york-v4/ui/avatar.tsx index 71e428b4ca..a38fe5d258 100644 --- a/apps/v4/registry/new-york-v4/ui/avatar.tsx +++ b/apps/v4/registry/new-york-v4/ui/avatar.tsx @@ -7,13 +7,17 @@ import { cn } from "@/lib/utils" function Avatar({ className, + size = "default", ...props -}: React.ComponentProps) { +}: React.ComponentProps & { + size?: "default" | "sm" | "lg" +}) { return ( ) { + return ( + svg]:hidden", + "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", + "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", + className + )} + {...props} + /> + ) +} + +function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function AvatarGroupCount({ + className, + ...props +}: React.ComponentProps<"div">) { + return ( +
svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", + className + )} + {...props} + /> + ) +} + +export { + Avatar, + AvatarImage, + AvatarFallback, + AvatarBadge, + AvatarGroup, + AvatarGroupCount, +} diff --git a/apps/v4/registry/new-york-v4/ui/badge.tsx b/apps/v4/registry/new-york-v4/ui/badge.tsx index fd3a406bad..ba40cc16b6 100644 --- a/apps/v4/registry/new-york-v4/ui/badge.tsx +++ b/apps/v4/registry/new-york-v4/ui/badge.tsx @@ -5,18 +5,19 @@ import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( - "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", + "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", { variants: { variant: { - default: - "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", + default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90", secondary: - "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", + "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", destructive: - "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", + "bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", outline: - "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", + "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", + ghost: "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground", + link: "text-primary underline-offset-4 [a&]:hover:underline", }, }, defaultVariants: { @@ -27,7 +28,7 @@ const badgeVariants = cva( function Badge({ className, - variant, + variant = "default", asChild = false, ...props }: React.ComponentProps<"span"> & @@ -37,6 +38,7 @@ function Badge({ return ( diff --git a/apps/v4/registry/new-york-v4/ui/button.tsx b/apps/v4/registry/new-york-v4/ui/button.tsx index 37a7d4b9a2..915ea2a0f6 100644 --- a/apps/v4/registry/new-york-v4/ui/button.tsx +++ b/apps/v4/registry/new-york-v4/ui/button.tsx @@ -22,9 +22,11 @@ const buttonVariants = cva( }, size: { default: "h-9 px-4 py-2 has-[>svg]:px-3", + xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3", sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5", lg: "h-10 rounded-md px-6 has-[>svg]:px-4", icon: "size-9", + "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3", "icon-sm": "size-8", "icon-lg": "size-10", }, diff --git a/apps/v4/registry/new-york-v4/ui/combobox.tsx b/apps/v4/registry/new-york-v4/ui/combobox.tsx index d9f0e31c7e..dc314fee75 100644 --- a/apps/v4/registry/new-york-v4/ui/combobox.tsx +++ b/apps/v4/registry/new-york-v4/ui/combobox.tsx @@ -2,7 +2,7 @@ import * as React from "react" import { Combobox as ComboboxPrimitive } from "@base-ui/react" -import { IconCheck, IconChevronDown, IconX } from "@tabler/icons-react" +import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/registry/new-york-v4/ui/button" @@ -31,7 +31,7 @@ function ComboboxTrigger({ {...props} > {children} - @@ -47,7 +47,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) { className={cn(className)} {...props} > - + ) } @@ -160,7 +160,7 @@ function ComboboxItem({ } > - + ) @@ -233,7 +233,7 @@ function ComboboxChips({ } + render={ + + )} +
) } diff --git a/apps/v4/registry/new-york-v4/ui/popover.tsx b/apps/v4/registry/new-york-v4/ui/popover.tsx index 01e468b678..3cab5f28dc 100644 --- a/apps/v4/registry/new-york-v4/ui/popover.tsx +++ b/apps/v4/registry/new-york-v4/ui/popover.tsx @@ -45,4 +45,45 @@ function PopoverAnchor({ return } -export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } +function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) { + return ( +
+ ) +} + +function PopoverDescription({ + className, + ...props +}: React.ComponentProps<"p">) { + return ( +

+ ) +} + +export { + Popover, + PopoverTrigger, + PopoverContent, + PopoverAnchor, + PopoverHeader, + PopoverTitle, + PopoverDescription, +} diff --git a/apps/v4/registry/new-york-v4/ui/sheet.tsx b/apps/v4/registry/new-york-v4/ui/sheet.tsx index 84649ad0ff..7bf2857e00 100644 --- a/apps/v4/registry/new-york-v4/ui/sheet.tsx +++ b/apps/v4/registry/new-york-v4/ui/sheet.tsx @@ -48,9 +48,11 @@ function SheetContent({ className, children, side = "right", + showCloseButton = true, ...props }: React.ComponentProps & { side?: "top" | "right" | "bottom" | "left" + showCloseButton?: boolean }) { return ( @@ -72,10 +74,12 @@ function SheetContent({ {...props} > {children} - - - Close - + {showCloseButton && ( + + + Close + + )} ) diff --git a/apps/v4/registry/new-york-v4/ui/switch.tsx b/apps/v4/registry/new-york-v4/ui/switch.tsx index 6a2b5241d8..f442c2cb75 100644 --- a/apps/v4/registry/new-york-v4/ui/switch.tsx +++ b/apps/v4/registry/new-york-v4/ui/switch.tsx @@ -7,13 +7,17 @@ import { cn } from "@/lib/utils" function Switch({ className, + size = "default", ...props -}: React.ComponentProps) { +}: React.ComponentProps & { + size?: "sm" | "default" +}) { return ( diff --git a/apps/v4/registry/new-york-v4/ui/tabs.tsx b/apps/v4/registry/new-york-v4/ui/tabs.tsx index 497ba5ea34..441c5d4264 100644 --- a/apps/v4/registry/new-york-v4/ui/tabs.tsx +++ b/apps/v4/registry/new-york-v4/ui/tabs.tsx @@ -2,33 +2,55 @@ import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" +import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" function Tabs({ className, + orientation = "horizontal", ...props }: React.ComponentProps) { return ( ) } +const tabsListVariants = cva( + "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col", + { + variants: { + variant: { + default: "bg-muted", + line: "gap-1 bg-transparent", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + function TabsList({ className, + variant = "default", ...props -}: React.ComponentProps) { +}: React.ComponentProps & + VariantProps) { return ( ) @@ -42,7 +64,10 @@ function TabsTrigger({ @/registry/radix-nova/ui/button transformedContent = transformedContent.replace( - new RegExp( - `@/registry/bases/${base.name}/`, - "g" - ), + new RegExp(`@/registry/bases/${base.name}/`, "g"), `@/registry/${base.name}-${style.name}/` ) }