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/components/command-menu.tsx b/apps/v4/components/command-menu.tsx index cd6d65b123..060b82013b 100644 --- a/apps/v4/components/command-menu.tsx +++ b/apps/v4/components/command-menu.tsx @@ -30,6 +30,7 @@ import { Dialog, DialogDescription, DialogHeader, + DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, @@ -534,10 +535,7 @@ function DialogContent({ }) { return ( - + +``` + +### Usage + +```tsx + + Open + + {/* Opens on the left in LTR, right in RTL */} + + +``` + +### LLM Prompt + +Ask your LLM to update your components by running the following prompt: + +```txt showLineNumbers +Add inline-start and inline-end support to my shadcn/ui components. Add the following Tailwind classes to each component: + +| File | Component | Add Classes | +|------|-----------|-------------| +| tooltip.tsx | TooltipContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` | +| tooltip.tsx | TooltipArrow | `data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 +data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2` | +| popover.tsx | PopoverContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` | +| hover-card.tsx | HoverCardContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` | +| select.tsx | SelectContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 +data-[align-trigger=true]:animate-none` and add `data-align-trigger={alignItemWithTrigger}` attribute | +| combobox.tsx | ComboboxContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` | +| dropdown-menu.tsx | DropdownMenuContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` | +| context-menu.tsx | ContextMenuContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` | +| menubar.tsx | MenubarContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` | + +Add these classes next to the existing `data-[side=top]`, `data-[side=bottom]`, `data-[side=left]`, `data-[side=right]` classes. +``` diff --git a/apps/v4/examples/base/ui/combobox.tsx b/apps/v4/examples/base/ui/combobox.tsx index 14b34f7bbc..2ca6362d57 100644 --- a/apps/v4/examples/base/ui/combobox.tsx +++ b/apps/v4/examples/base/ui/combobox.tsx @@ -1,8 +1,6 @@ "use client" import * as React from "react" -import { Combobox as ComboboxPrimitive } from "@base-ui/react" - import { cn } from "@/examples/base/lib/utils" import { Button } from "@/examples/base/ui/button" import { @@ -11,6 +9,8 @@ import { InputGroupButton, InputGroupInput, } from "@/examples/base/ui/input-group" +import { Combobox as ComboboxPrimitive } from "@base-ui/react" + import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder" const Combobox = ComboboxPrimitive.Root @@ -37,7 +37,7 @@ function ComboboxTrigger({ hugeicons="ArrowDown01Icon" phosphor="CaretDownIcon" remixicon="RiArrowDownSLine" - className="text-muted-foreground size-4 pointer-events-none" + className="text-muted-foreground pointer-events-none size-4" /> ) @@ -125,7 +125,7 @@ function ComboboxContent({ data-slot="combobox-content" data-chips={!!anchor} className={cn( - "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)", + "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target group/combobox-content relative max-h-(--available-height) max-h-72 w-(--anchor-width) max-w-(--available-width) min-w-36 min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg shadow-md ring-1 duration-100 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none", className )} {...props} @@ -140,7 +140,7 @@ function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) { {children} } + render={ + + } > \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}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\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", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\n\nfunction Dialog({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction DialogTrigger({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction DialogPortal({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction DialogClose({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction DialogContent({\n className,\n children,\n showCloseButton = true,\n ...props\n}: React.ComponentProps & {\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 DialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction DialogFooter({\n className,\n showCloseButton = false,\n children,\n ...props\n}: React.ComponentProps<\"div\"> & {\n showCloseButton?: boolean\n}) {\n return (\n \n {children}\n {showCloseButton && (\n \n \n \n )}\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/public/r/styles/radix-lyra/select.json b/apps/v4/public/r/styles/radix-lyra/select.json index c1f904fc0c..5c3b0842f7 100644 --- a/apps/v4/public/r/styles/radix-lyra/select.json +++ b/apps/v4/public/r/styles/radix-lyra/select.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/radix-lyra/ui/select.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectValue({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: React.ComponentProps & {\n size?: \"sm\" | \"default\"\n}) {\n return (\n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectContent({\n className,\n children,\n position = \"item-aligned\",\n align = \"center\",\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectValue({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: React.ComponentProps & {\n size?: \"sm\" | \"default\"\n}) {\n return (\n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectContent({\n className,\n children,\n position = \"item-aligned\",\n align = \"center\",\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-maia/select.json b/apps/v4/public/r/styles/radix-maia/select.json index d7dc176c12..e18927793a 100644 --- a/apps/v4/public/r/styles/radix-maia/select.json +++ b/apps/v4/public/r/styles/radix-maia/select.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/radix-maia/ui/select.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectValue({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: React.ComponentProps & {\n size?: \"sm\" | \"default\"\n}) {\n return (\n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectContent({\n className,\n children,\n position = \"item-aligned\",\n align = \"center\",\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectValue({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: React.ComponentProps & {\n size?: \"sm\" | \"default\"\n}) {\n return (\n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectContent({\n className,\n children,\n position = \"item-aligned\",\n align = \"center\",\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-maia/tooltip.json b/apps/v4/public/r/styles/radix-maia/tooltip.json index db3c1d88d6..cd3869f7a9 100644 --- a/apps/v4/public/r/styles/radix-maia/tooltip.json +++ b/apps/v4/public/r/styles/radix-maia/tooltip.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/radix-maia/ui/tooltip.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction TooltipProvider({\n delayDuration = 0,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction Tooltip({\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction TooltipTrigger({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction TooltipContent({\n className,\n sideOffset = 0,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n {children}\n \n \n \n )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction TooltipProvider({\n delayDuration = 0,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction Tooltip({\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction TooltipTrigger({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction TooltipContent({\n className,\n sideOffset = 0,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n {children}\n \n \n \n )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-mira/menubar.json b/apps/v4/public/r/styles/radix-mira/menubar.json index 229505f910..b8c7aa46b9 100644 --- a/apps/v4/public/r/styles/radix-mira/menubar.json +++ b/apps/v4/public/r/styles/radix-mira/menubar.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/radix-mira/ui/menubar.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarMenu({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarGroup({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarPortal({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarRadioGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarTrigger({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarContent({\n className,\n align = \"start\",\n alignOffset = -4,\n sideOffset = 8,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction MenubarItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n \n )\n}\n\nfunction MenubarCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction MenubarRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction MenubarLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n )\n}\n\nfunction MenubarSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction MenubarSub({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction MenubarSubContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n Menubar,\n MenubarPortal,\n MenubarMenu,\n MenubarTrigger,\n MenubarContent,\n MenubarGroup,\n MenubarSeparator,\n MenubarLabel,\n MenubarItem,\n MenubarShortcut,\n MenubarCheckboxItem,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarSub,\n MenubarSubTrigger,\n MenubarSubContent,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarMenu({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarGroup({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarPortal({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarRadioGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarTrigger({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarContent({\n className,\n align = \"start\",\n alignOffset = -4,\n sideOffset = 8,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction MenubarItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n \n )\n}\n\nfunction MenubarCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction MenubarRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction MenubarLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n )\n}\n\nfunction MenubarSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction MenubarSub({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction MenubarSubContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n Menubar,\n MenubarPortal,\n MenubarMenu,\n MenubarTrigger,\n MenubarContent,\n MenubarGroup,\n MenubarSeparator,\n MenubarLabel,\n MenubarItem,\n MenubarShortcut,\n MenubarCheckboxItem,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarSub,\n MenubarSubTrigger,\n MenubarSubContent,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-mira/select.json b/apps/v4/public/r/styles/radix-mira/select.json index 1f55ecc11d..ea5c2abe95 100644 --- a/apps/v4/public/r/styles/radix-mira/select.json +++ b/apps/v4/public/r/styles/radix-mira/select.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/radix-mira/ui/select.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectValue({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: React.ComponentProps & {\n size?: \"sm\" | \"default\"\n}) {\n return (\n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectContent({\n className,\n children,\n position = \"item-aligned\",\n align = \"center\",\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectValue({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: React.ComponentProps & {\n size?: \"sm\" | \"default\"\n}) {\n return (\n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectContent({\n className,\n children,\n position = \"item-aligned\",\n align = \"center\",\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-nova/menubar.json b/apps/v4/public/r/styles/radix-nova/menubar.json index 9873a0b164..21344ee4b2 100644 --- a/apps/v4/public/r/styles/radix-nova/menubar.json +++ b/apps/v4/public/r/styles/radix-nova/menubar.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/radix-nova/ui/menubar.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarMenu({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarGroup({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarPortal({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarRadioGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarTrigger({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarContent({\n className,\n align = \"start\",\n alignOffset = -4,\n sideOffset = 8,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction MenubarItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n \n )\n}\n\nfunction MenubarCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction MenubarRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction MenubarLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n )\n}\n\nfunction MenubarSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction MenubarSub({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction MenubarSubContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n Menubar,\n MenubarPortal,\n MenubarMenu,\n MenubarTrigger,\n MenubarContent,\n MenubarGroup,\n MenubarSeparator,\n MenubarLabel,\n MenubarItem,\n MenubarShortcut,\n MenubarCheckboxItem,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarSub,\n MenubarSubTrigger,\n MenubarSubContent,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarMenu({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarGroup({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarPortal({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarRadioGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarTrigger({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarContent({\n className,\n align = \"start\",\n alignOffset = -4,\n sideOffset = 8,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction MenubarItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n \n )\n}\n\nfunction MenubarCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction MenubarRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction MenubarLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n )\n}\n\nfunction MenubarSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction MenubarSub({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction MenubarSubContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n Menubar,\n MenubarPortal,\n MenubarMenu,\n MenubarTrigger,\n MenubarContent,\n MenubarGroup,\n MenubarSeparator,\n MenubarLabel,\n MenubarItem,\n MenubarShortcut,\n MenubarCheckboxItem,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarSub,\n MenubarSubTrigger,\n MenubarSubContent,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-nova/select.json b/apps/v4/public/r/styles/radix-nova/select.json index 2d7a4d5124..1c1e73c783 100644 --- a/apps/v4/public/r/styles/radix-nova/select.json +++ b/apps/v4/public/r/styles/radix-nova/select.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/radix-nova/ui/select.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectValue({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: React.ComponentProps & {\n size?: \"sm\" | \"default\"\n}) {\n return (\n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectContent({\n className,\n children,\n position = \"item-aligned\",\n align = \"center\",\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectValue({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: React.ComponentProps & {\n size?: \"sm\" | \"default\"\n}) {\n return (\n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectContent({\n className,\n children,\n position = \"item-aligned\",\n align = \"center\",\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-vega/select.json b/apps/v4/public/r/styles/radix-vega/select.json index 950774f982..75ee2d15da 100644 --- a/apps/v4/public/r/styles/radix-vega/select.json +++ b/apps/v4/public/r/styles/radix-vega/select.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/radix-vega/ui/select.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectValue({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: React.ComponentProps & {\n size?: \"sm\" | \"default\"\n}) {\n return (\n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectContent({\n className,\n children,\n position = \"item-aligned\",\n align = \"center\",\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectGroup({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectValue({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction SelectTrigger({\n className,\n size = \"default\",\n children,\n ...props\n}: React.ComponentProps & {\n size?: \"sm\" | \"default\"\n}) {\n return (\n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectContent({\n className,\n children,\n position = \"item-aligned\",\n align = \"center\",\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n {children}\n \n \n \n \n )\n}\n\nfunction SelectLabel({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction SelectSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nexport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n}\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/bases/base/examples/combobox-example.tsx b/apps/v4/registry/bases/base/examples/combobox-example.tsx index 4a6e9ff273..47be60b1d9 100644 --- a/apps/v4/registry/bases/base/examples/combobox-example.tsx +++ b/apps/v4/registry/bases/base/examples/combobox-example.tsx @@ -70,6 +70,7 @@ export default function ComboboxExample() { + @@ -565,6 +566,42 @@ function ComboboxBasic() { ) } +function ComboboxSides() { + return ( + +
+ {( + [ + "inline-start", + "left", + "top", + "bottom", + "right", + "inline-end", + ] as const + ).map((side) => ( + + + + No items found. + + {(item) => ( + + {item} + + )} + + + + ))} +
+ + ) +} + function ComboboxDisabled() { return ( diff --git a/apps/v4/registry/bases/base/examples/context-menu-example.tsx b/apps/v4/registry/bases/base/examples/context-menu-example.tsx index 7f2e8c39e2..6532d8491d 100644 --- a/apps/v4/registry/bases/base/examples/context-menu-example.tsx +++ b/apps/v4/registry/bases/base/examples/context-menu-example.tsx @@ -37,8 +37,8 @@ export default function ContextMenuExample() { return ( - + @@ -393,56 +393,31 @@ function ContextMenuWithDestructive() { function ContextMenuWithSides() { return ( - -
- - - Right click (top) - - - - Back - Forward - Reload - - - - - - Right click (right) - - - - Back - Forward - Reload - - - - - - Right click (bottom) - - - - Back - Forward - Reload - - - - - - Right click (left) - - - - Back - Forward - Reload - - - + +
+ {( + [ + "inline-start", + "left", + "top", + "bottom", + "right", + "inline-end", + ] as const + ).map((side) => ( + + + {side.replace("-", " ")} + + + + Back + Forward + Reload + + + + ))}
) diff --git a/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx b/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx index 24915c5173..82e41eed9e 100644 --- a/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx +++ b/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx @@ -44,6 +44,7 @@ export default function DropdownMenuExample() { + @@ -84,6 +85,40 @@ function DropdownMenuBasic() { ) } +function DropdownMenuSides() { + return ( + +
+ {( + [ + "inline-start", + "left", + "top", + "bottom", + "right", + "inline-end", + ] as const + ).map((side) => ( + + } + > + {side.replace("-", " ")} + + + + Profile + Billing + Settings + + + + ))} +
+ + ) +} + function DropdownMenuWithIcons() { return ( diff --git a/apps/v4/registry/bases/base/examples/hover-card-example.tsx b/apps/v4/registry/bases/base/examples/hover-card-example.tsx index 7618c77e53..2c72395f35 100644 --- a/apps/v4/registry/bases/base/examples/hover-card-example.tsx +++ b/apps/v4/registry/bases/base/examples/hover-card-example.tsx @@ -26,12 +26,19 @@ export default function HoverCardExample() { ) } -const HOVER_CARD_SIDES = ["top", "right", "bottom", "left"] as const +const HOVER_CARD_SIDES = [ + "inline-start", + "left", + "top", + "bottom", + "right", + "inline-end", +] as const function HoverCardSides() { return ( - -
+ +
{HOVER_CARD_SIDES.map((side) => ( } > - {side} + {side.replace("-", " ")}

Hover Card

- This hover card appears on the {side} side of the trigger. + This hover card appears on the {side.replace("-", " ")} side + of the trigger.

diff --git a/apps/v4/registry/bases/base/examples/menubar-example.tsx b/apps/v4/registry/bases/base/examples/menubar-example.tsx index de404c1382..880e32c49a 100644 --- a/apps/v4/registry/bases/base/examples/menubar-example.tsx +++ b/apps/v4/registry/bases/base/examples/menubar-example.tsx @@ -38,6 +38,7 @@ export default function MenubarExample() { + @@ -90,6 +91,40 @@ function MenubarBasic() { ) } +function MenubarSides() { + return ( + +
+ {( + [ + "inline-start", + "left", + "top", + "bottom", + "right", + "inline-end", + ] as const + ).map((side) => ( + + + + {side.replace("-", " ")} + + + + New Tab + New Window + New Incognito Window + + + + + ))} +
+ + ) +} + function MenubarWithSubmenu() { return ( diff --git a/apps/v4/registry/bases/base/examples/popover-example.tsx b/apps/v4/registry/bases/base/examples/popover-example.tsx index 2c2253a213..23c027fd64 100644 --- a/apps/v4/registry/bases/base/examples/popover-example.tsx +++ b/apps/v4/registry/bases/base/examples/popover-example.tsx @@ -26,6 +26,7 @@ export default function PopoverExample() { return ( + @@ -53,6 +54,47 @@ function PopoverBasic() { ) } +function PopoverSides() { + return ( + +
+
+ {(["inline-start", "left", "top"] as const).map((side) => ( + + + } + > + {side.replace("-", " ")} + + +

Popover on {side.replace("-", " ")}

+ + + ))} +
+
+ {(["bottom", "right", "inline-end"] as const).map((side) => ( + + + } + > + {side.replace("-", " ")} + + +

Popover on {side.replace("-", " ")}

+ + + ))} +
+
+ + ) +} + function PopoverWithForm() { return ( diff --git a/apps/v4/registry/bases/base/examples/select-example.tsx b/apps/v4/registry/bases/base/examples/select-example.tsx index 1dd2a82b97..23c4011b1b 100644 --- a/apps/v4/registry/bases/base/examples/select-example.tsx +++ b/apps/v4/registry/bases/base/examples/select-example.tsx @@ -46,6 +46,7 @@ export default function SelectExample() { return ( + @@ -92,6 +93,46 @@ function SelectBasic() { ) } +function SelectSides() { + const items = [ + { label: "Select", value: null }, + { label: "Apple", value: "apple" }, + { label: "Banana", value: "banana" }, + { label: "Blueberry", value: "blueberry" }, + ] + return ( + +
+ {( + [ + "inline-start", + "left", + "top", + "bottom", + "right", + "inline-end", + ] as const + ).map((side) => ( + + ))} +
+ + ) +} + function SelectWithIcons() { const items = [ { diff --git a/apps/v4/registry/bases/base/examples/tooltip-example.tsx b/apps/v4/registry/bases/base/examples/tooltip-example.tsx index 1079d8a91f..e368c25250 100644 --- a/apps/v4/registry/bases/base/examples/tooltip-example.tsx +++ b/apps/v4/registry/bases/base/examples/tooltip-example.tsx @@ -47,7 +47,16 @@ function TooltipSides() { return (
- {(["top", "right", "bottom", "left", "inline-start", "inline-end"] as const).map((side) => ( + {( + [ + "inline-start", + "left", + "top", + "bottom", + "right", + "inline-end", + ] as const + ).map((side) => ( } diff --git a/apps/v4/registry/bases/base/ui/combobox.tsx b/apps/v4/registry/bases/base/ui/combobox.tsx index f895c5b454..b10d5f8a22 100644 --- a/apps/v4/registry/bases/base/ui/combobox.tsx +++ b/apps/v4/registry/bases/base/ui/combobox.tsx @@ -125,7 +125,7 @@ function ComboboxContent({ data-slot="combobox-content" data-chips={!!anchor} className={cn( - "cn-combobox-content cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)", + "cn-combobox-content cn-combobox-content-logical cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)", className )} {...props} diff --git a/apps/v4/registry/bases/base/ui/context-menu.tsx b/apps/v4/registry/bases/base/ui/context-menu.tsx index b9815d91b5..60a90fbe11 100644 --- a/apps/v4/registry/bases/base/ui/context-menu.tsx +++ b/apps/v4/registry/bases/base/ui/context-menu.tsx @@ -53,7 +53,7 @@ function ContextMenuContent({ ) diff --git a/apps/v4/registry/bases/base/ui/popover.tsx b/apps/v4/registry/bases/base/ui/popover.tsx index c5710f29ed..7ce1820127 100644 --- a/apps/v4/registry/bases/base/ui/popover.tsx +++ b/apps/v4/registry/bases/base/ui/popover.tsx @@ -37,7 +37,7 @@ function PopoverContent({ {children} - + diff --git a/apps/v4/registry/bases/radix/ui/select.tsx b/apps/v4/registry/bases/radix/ui/select.tsx index 4a7bb65176..218d17e090 100644 --- a/apps/v4/registry/bases/radix/ui/select.tsx +++ b/apps/v4/registry/bases/radix/ui/select.tsx @@ -75,8 +75,9 @@ function SelectContent({ " }, 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({ [data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0; diff --git a/apps/v4/registry/styles/style-maia.css b/apps/v4/registry/styles/style-maia.css index 162d5f40a0..38cc2f1027 100644 --- a/apps/v4/registry/styles/style-maia.css +++ b/apps/v4/registry/styles/style-maia.css @@ -293,6 +293,10 @@ @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 *:data-[slot=input-group]:bg-input/30 max-h-72 min-w-36 overflow-hidden rounded-2xl shadow-2xl ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none; } + .cn-combobox-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-combobox-label { @apply text-muted-foreground px-3.5 py-2.5 text-xs; } @@ -395,6 +399,10 @@ @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100; } + .cn-context-menu-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-context-menu-item { @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4; } @@ -498,6 +506,10 @@ @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100; } + .cn-dropdown-menu-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-dropdown-menu-item { @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4; } @@ -621,6 +633,10 @@ @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground w-72 rounded-2xl p-4 text-sm shadow-2xl ring-1 duration-100; } + .cn-hover-card-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + /* MARK: Input */ .cn-input { @apply bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-4xl border px-3 py-1 text-base transition-colors file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm; @@ -751,6 +767,10 @@ @apply bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100; } + .cn-menubar-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-menubar-item { @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4; } @@ -867,6 +887,10 @@ @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 flex flex-col gap-4 rounded-2xl p-4 text-sm shadow-2xl ring-1 duration-100; } + .cn-popover-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-popover-header { @apply flex flex-col gap-1 text-sm; } @@ -948,6 +972,10 @@ @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-36 rounded-2xl shadow-2xl ring-1 duration-100; } + .cn-select-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-select-label { @apply text-muted-foreground px-3 py-2.5 text-xs; } @@ -1265,8 +1293,16 @@ @apply data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-2xl px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-4xl; } + .cn-tooltip-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-tooltip-arrow { - @apply size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]; + @apply size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px]; + } + + .cn-tooltip-arrow-logical { + @apply data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:translate-x-[1.5px] data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:translate-x-[-1.5px] data-[side=inline-start]:-translate-y-1/2; } /* MARK: Input Group */ diff --git a/apps/v4/registry/styles/style-mira.css b/apps/v4/registry/styles/style-mira.css index 7bbedfde7b..e1c7224047 100644 --- a/apps/v4/registry/styles/style-mira.css +++ b/apps/v4/registry/styles/style-mira.css @@ -293,6 +293,10 @@ @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/20 dark:bg-popover max-h-72 min-w-32 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-7 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none; } + .cn-combobox-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-combobox-label { @apply text-muted-foreground px-2 py-1.5 text-xs; } @@ -395,6 +399,10 @@ @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100; } + .cn-context-menu-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-context-menu-item { @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5; } @@ -498,6 +506,10 @@ @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100; } + .cn-dropdown-menu-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-dropdown-menu-item { @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5; } @@ -621,6 +633,10 @@ @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-72 rounded-lg p-2.5 text-xs/relaxed shadow-md ring-1 duration-100; } + .cn-hover-card-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + /* MARK: Input */ .cn-input { @apply bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 rounded-md border px-2 py-0.5 text-sm transition-colors file:h-6 file:text-xs/relaxed file:font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] md:text-xs/relaxed; @@ -740,17 +756,21 @@ /* MARK: Menubar */ .cn-menubar { - @apply bg-background h-9 rounded-md border p-1; + @apply bg-background h-9 rounded-lg border p-1; } .cn-menubar-trigger { - @apply hover:bg-muted aria-expanded:bg-muted rounded-[calc(var(--radius-sm)-2px)] px-2 py-[calc(--spacing(0.875))] text-xs/relaxed font-medium; + @apply hover:bg-muted aria-expanded:bg-muted rounded-[calc(var(--radius-md)-2px)] px-2 py-[calc(--spacing(0.85))] text-xs/relaxed font-medium; } .cn-menubar-content { @apply bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100; } + .cn-menubar-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-menubar-item { @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5; } @@ -867,6 +887,10 @@ @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-4 rounded-lg p-2.5 text-xs shadow-md ring-1 duration-100; } + .cn-popover-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-popover-header { @apply flex flex-col gap-1 text-xs; } @@ -948,6 +972,10 @@ @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg shadow-md ring-1 duration-100; } + .cn-select-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-select-label { @apply text-muted-foreground px-2 py-1.5 text-xs; } @@ -1267,10 +1295,18 @@ @apply data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-md; } + .cn-tooltip-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-tooltip-arrow { @apply size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]; } + .cn-tooltip-arrow-logical { + @apply data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2; + } + /* MARK: Input Group */ .cn-input-group { @apply border-input bg-input/20 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-7 rounded-md border transition-colors has-data-[align=block-end]:rounded-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:ring-[2px] has-[[data-slot][aria-invalid=true]]:ring-[2px] has-[textarea]:rounded-md has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0; diff --git a/apps/v4/registry/styles/style-nova.css b/apps/v4/registry/styles/style-nova.css index 6d97e6611f..52e39191a4 100644 --- a/apps/v4/registry/styles/style-nova.css +++ b/apps/v4/registry/styles/style-nova.css @@ -293,6 +293,10 @@ @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none; } + .cn-combobox-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-combobox-label { @apply text-muted-foreground px-2 py-1.5 text-xs; } @@ -395,6 +399,10 @@ @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100; } + .cn-context-menu-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-context-menu-item { @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4; } @@ -498,6 +506,10 @@ @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100; } + .cn-dropdown-menu-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-dropdown-menu-item { @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4; } @@ -621,6 +633,10 @@ @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100; } + .cn-hover-card-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + /* MARK: Input */ .cn-input { @apply dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm; @@ -740,17 +756,21 @@ /* MARK: Menubar */ .cn-menubar { - @apply bg-background h-8 gap-0.5 rounded-lg border p-1; + @apply bg-background h-8 gap-0.5 rounded-lg border p-[3px]; } .cn-menubar-trigger { - @apply hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-px text-sm font-medium; + @apply hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-[2px] text-sm font-medium; } .cn-menubar-content { @apply bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100; } + .cn-menubar-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-menubar-item { @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4; } @@ -867,6 +887,10 @@ @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100; } + .cn-popover-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-popover-header { @apply flex flex-col gap-0.5 text-sm; } @@ -948,6 +972,10 @@ @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100; } + .cn-select-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-select-label { @apply text-muted-foreground px-1.5 py-1 text-xs; } @@ -1265,10 +1293,18 @@ @apply data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs; } + .cn-tooltip-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-tooltip-arrow { @apply size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]; } + .cn-tooltip-arrow-logical { + @apply data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2; + } + /* MARK: Input Group */ .cn-input-group { @apply border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0; diff --git a/apps/v4/registry/styles/style-vega.css b/apps/v4/registry/styles/style-vega.css index 1b222621c4..aaebd8835b 100644 --- a/apps/v4/registry/styles/style-vega.css +++ b/apps/v4/registry/styles/style-vega.css @@ -289,6 +289,10 @@ @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none; } + .cn-combobox-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-combobox-label { @apply text-muted-foreground px-2 py-1.5 text-xs; } @@ -391,6 +395,10 @@ @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-md ring-1 duration-100; } + .cn-context-menu-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-context-menu-item { @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4; } @@ -494,6 +502,10 @@ @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-md p-1 shadow-md ring-1 duration-100; } + .cn-dropdown-menu-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-dropdown-menu-item { @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4; } @@ -617,6 +629,10 @@ @apply data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground w-64 rounded-lg p-4 text-sm shadow-md ring-1 duration-100; } + .cn-hover-card-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + /* MARK: Input */ .cn-input { @apply dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm; @@ -747,6 +763,10 @@ @apply bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md p-1 shadow-md ring-1 duration-100; } + .cn-menubar-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-menubar-item { @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4; } @@ -863,6 +883,10 @@ @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-4 rounded-md p-4 text-sm shadow-md ring-1 duration-100; } + .cn-popover-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-popover-header { @apply flex flex-col gap-1 text-sm; } @@ -944,6 +968,10 @@ @apply bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 duration-100; } + .cn-select-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-select-label { @apply text-muted-foreground px-2 py-1.5 text-xs; } @@ -1261,10 +1289,18 @@ @apply data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs; } + .cn-tooltip-content-logical { + @apply data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2; + } + .cn-tooltip-arrow { @apply size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]; } + .cn-tooltip-arrow-logical { + @apply data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2; + } + /* MARK: Input Group */ .cn-input-group { @apply border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0; diff --git a/apps/v4/scripts/build-registry.mts b/apps/v4/scripts/build-registry.mts index 6ce10171a2..e4f175b973 100644 --- a/apps/v4/scripts/build-registry.mts +++ b/apps/v4/scripts/build-registry.mts @@ -249,10 +249,7 @@ async function buildBases(bases: Base[]) { // Transform import paths from base to style-specific paths. // e.g., @/registry/bases/radix/ui/button -> @/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}/` ) } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 89e44ce552..6babfb2577 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -311,8 +311,8 @@ importers: specifier: ^1.0.0 version: 1.0.0 lodash: - specifier: ^4.17.21 - version: 4.17.21 + specifier: ^4.17.23 + version: 4.17.23 lru-cache: specifier: ^11.2.4 version: 11.2.4 @@ -597,7 +597,7 @@ importers: version: 5.9.2 vite-tsconfig-paths: specifier: ^4.2.0 - version: 4.3.2(typescript@5.9.2)(vite@7.1.12(@types/node@20.19.10)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.8.1)) + version: 4.3.2(typescript@5.9.2)(vite@5.4.19(@types/node@20.19.10)(lightningcss@1.30.1)) vitest: specifier: ^2.1.9 version: 2.1.9(@types/node@20.19.10)(lightningcss@1.30.1)(msw@2.10.4(@types/node@20.19.10)(typescript@5.9.2)) @@ -6038,8 +6038,8 @@ packages: lodash.upperfirst@4.3.1: resolution: {integrity: sha512-sReKOYJIJf74dhJONhU4e0/shzi1trVbSWDOhKYE5XV2O+H7Sb2Dihwuc7xWxVl+DgFPyTqIN3zMfT9cq5iWDg==} - lodash@4.17.21: - resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} + lodash@4.17.23: + resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==} log-symbols@6.0.0: resolution: {integrity: sha512-i24m8rpwhmPIS4zscNzK6MSEhk0DUWa/8iYQWxhffV8jkI4Phvs3F+quL5xvS0gdQR0FyTCMMH33Y78dDTzzIw==} @@ -7671,6 +7671,7 @@ packages: tar@7.4.3: resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==} engines: {node: '>=18'} + deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exhorbitant rates) by contacting i@izs.me term-size@2.2.1: resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==} @@ -12160,7 +12161,7 @@ snapshots: dependencies: chalk: 4.1.2 date-fns: 2.30.0 - lodash: 4.17.21 + lodash: 4.17.23 rxjs: 7.8.2 shell-quote: 1.8.3 spawn-command: 0.0.2 @@ -12808,7 +12809,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.1(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1): + eslint-module-utils@2.12.1(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1))(eslint@8.57.1): dependencies: debug: 3.2.7 optionalDependencies: @@ -12819,7 +12820,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.6.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.33.0(jiti@2.6.1)): + eslint-module-utils@2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.6.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.33.0(jiti@2.6.1)))(eslint@9.33.0(jiti@2.6.1)): dependencies: debug: 3.2.7 optionalDependencies: @@ -12841,7 +12842,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@8.57.1) + eslint-module-utils: 2.12.1(@typescript-eslint/parser@5.62.0(eslint@8.57.1)(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@8.57.1))(eslint@8.57.1) hasown: 2.0.2 is-core-module: 2.16.1 is-glob: 4.0.3 @@ -12870,7 +12871,7 @@ snapshots: doctrine: 2.1.0 eslint: 9.33.0(jiti@2.6.1) eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.6.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.33.0(jiti@2.6.1)) + eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.39.0(eslint@9.33.0(jiti@2.6.1))(typescript@5.9.2))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.33.0(jiti@2.6.1)))(eslint@9.33.0(jiti@2.6.1)) hasown: 2.0.2 is-core-module: 2.16.1 is-glob: 4.0.3 @@ -14372,7 +14373,7 @@ snapshots: lodash.upperfirst@4.3.1: {} - lodash@4.17.21: {} + lodash@4.17.23: {} log-symbols@6.0.0: dependencies: @@ -15726,7 +15727,7 @@ snapshots: dependencies: clsx: 2.1.1 eventemitter3: 4.0.7 - lodash: 4.17.21 + lodash: 4.17.23 react: 19.2.3 react-dom: 19.2.3(react@19.2.3) react-is: 18.3.1 @@ -16959,6 +16960,17 @@ snapshots: - supports-color - terser + vite-tsconfig-paths@4.3.2(typescript@5.9.2)(vite@5.4.19(@types/node@20.19.10)(lightningcss@1.30.1)): + dependencies: + debug: 4.4.1 + globrex: 0.1.2 + tsconfck: 3.1.6(typescript@5.9.2) + optionalDependencies: + vite: 5.4.19(@types/node@20.19.10)(lightningcss@1.30.1) + transitivePeerDependencies: + - supports-color + - typescript + vite-tsconfig-paths@4.3.2(typescript@5.9.2)(vite@7.1.12(@types/node@20.19.10)(jiti@1.21.7)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.8.1)): dependencies: debug: 4.4.1 @@ -16970,17 +16982,6 @@ snapshots: - supports-color - typescript - vite-tsconfig-paths@4.3.2(typescript@5.9.2)(vite@7.1.12(@types/node@20.19.10)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.8.1)): - dependencies: - debug: 4.4.1 - globrex: 0.1.2 - tsconfck: 3.1.6(typescript@5.9.2) - optionalDependencies: - vite: 7.1.12(@types/node@20.19.10)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.3)(yaml@2.8.1) - transitivePeerDependencies: - - supports-color - - typescript - vite@5.4.19(@types/node@20.19.10)(lightningcss@1.30.1): dependencies: esbuild: 0.21.5 @@ -17063,7 +17064,7 @@ snapshots: dependencies: axios: 1.11.0(debug@4.4.1) joi: 17.13.3 - lodash: 4.17.21 + lodash: 4.17.23 minimist: 1.2.8 rxjs: 7.8.2 transitivePeerDependencies: