From fbc732159ab49f8657686e740d59477df15ced77 Mon Sep 17 00:00:00 2001 From: Adnaan Ali Date: Thu, 26 Mar 2026 08:01:08 +0000 Subject: [PATCH 1/3] fix: remove duplicate Toggle export from toggle-group to avoid conflicts --- packages/ui/src/components/toggle-group.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui/src/components/toggle-group.tsx b/packages/ui/src/components/toggle-group.tsx index 59b635a97..6908ee6a9 100644 --- a/packages/ui/src/components/toggle-group.tsx +++ b/packages/ui/src/components/toggle-group.tsx @@ -54,7 +54,7 @@ export function ToggleGroup({ ); } -export function Toggle({ +function Toggle({ className, children, variant, From 2d0ccb2713a9241a3c656f4e321449958eec268b Mon Sep 17 00:00:00 2001 From: Adnaan Ali Date: Thu, 26 Mar 2026 10:03:21 +0000 Subject: [PATCH 2/3] fix: use className prop in CommandPanel, DrawerViewport, and SheetViewport --- packages/ui/src/components/command.tsx | 2 +- packages/ui/src/components/drawer.tsx | 1 + packages/ui/src/components/sheet.tsx | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/command.tsx b/packages/ui/src/components/command.tsx index 2ec15f0de..fa947b612 100644 --- a/packages/ui/src/components/command.tsx +++ b/packages/ui/src/components/command.tsx @@ -162,7 +162,7 @@ export function CommandPanel({ }: React.ComponentProps<"div">): React.ReactElement { return (
); diff --git a/packages/ui/src/components/drawer.tsx b/packages/ui/src/components/drawer.tsx index b63bed975..0dbda1f3d 100644 --- a/packages/ui/src/components/drawer.tsx +++ b/packages/ui/src/components/drawer.tsx @@ -128,6 +128,7 @@ export function DrawerViewport({ variant === "inset" && "px-(--inset) sm:[--inset:--spacing(4)]", variant === "inset" && position !== "bottom" && "pt-(--inset)", variant === "inset" && position !== "top" && "pb-(--inset)", + className )} data-slot="drawer-viewport" {...props} diff --git a/packages/ui/src/components/sheet.tsx b/packages/ui/src/components/sheet.tsx index e3ab01057..833b1b534 100644 --- a/packages/ui/src/components/sheet.tsx +++ b/packages/ui/src/components/sheet.tsx @@ -59,6 +59,7 @@ export function SheetViewport({ side === "left" && "flex justify-start", side === "right" && "flex justify-end", variant === "inset" && "sm:p-4", + className )} data-slot="sheet-viewport" {...props} From 8a62e0d5c5f05538f4f4938611ef22413df0d4ed Mon Sep 17 00:00:00 2001 From: pasqualevitiello Date: Thu, 26 Mar 2026 12:49:48 +0100 Subject: [PATCH 3/3] build the registry and change only related files --- apps/ui/public/r/command.json | 2 +- apps/ui/public/r/drawer.json | 2 +- apps/ui/public/r/sheet.json | 2 +- apps/ui/registry/default/ui/command.tsx | 5 ++++- apps/ui/registry/default/ui/drawer.tsx | 1 + apps/ui/registry/default/ui/sheet.tsx | 1 + packages/ui/src/components/command.tsx | 5 ++++- packages/ui/src/components/drawer.tsx | 2 +- packages/ui/src/components/sheet.tsx | 2 +- 9 files changed, 15 insertions(+), 7 deletions(-) diff --git a/apps/ui/public/r/command.json b/apps/ui/public/r/command.json index 95476aedd..c8a65522d 100644 --- a/apps/ui/public/r/command.json +++ b/apps/ui/public/r/command.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/default/ui/command.tsx", - "content": "\"use client\";\n\nimport { Dialog as CommandDialogPrimitive } from \"@base-ui/react/dialog\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n Autocomplete,\n AutocompleteCollection,\n AutocompleteEmpty,\n AutocompleteGroup,\n AutocompleteGroupLabel,\n AutocompleteInput,\n AutocompleteItem,\n AutocompleteList,\n AutocompleteSeparator,\n} from \"@/registry/default/ui/autocomplete\";\n\nexport const CommandDialog: typeof CommandDialogPrimitive.Root =\n CommandDialogPrimitive.Root;\n\nexport const CommandDialogPortal: typeof CommandDialogPrimitive.Portal =\n CommandDialogPrimitive.Portal;\n\nexport const CommandCreateHandle: typeof CommandDialogPrimitive.createHandle =\n CommandDialogPrimitive.createHandle;\n\nexport function CommandDialogTrigger(\n props: CommandDialogPrimitive.Trigger.Props,\n): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandDialogBackdrop({\n className,\n ...props\n}: CommandDialogPrimitive.Backdrop.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandDialogViewport({\n className,\n ...props\n}: CommandDialogPrimitive.Viewport.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandDialogPopup({\n className,\n children,\n ...props\n}: CommandDialogPrimitive.Popup.Props): React.ReactElement {\n return (\n \n \n \n \n {children}\n \n \n \n );\n}\n\nexport function Command({\n autoHighlight = \"always\",\n keepHighlight = true,\n ...props\n}: React.ComponentProps): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandInput({\n className,\n placeholder = undefined,\n ...props\n}: React.ComponentProps): React.ReactElement {\n return (\n
\n }\n {...props}\n />\n
\n );\n}\n\nexport function CommandList({\n className,\n ...props\n}: React.ComponentProps): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandEmpty({\n className,\n ...props\n}: React.ComponentProps): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandPanel({\n className,\n ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandGroup({\n className,\n ...props\n}: React.ComponentProps): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandGroupLabel({\n className,\n ...props\n}: React.ComponentProps): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandCollection({\n ...props\n}: React.ComponentProps): React.ReactElement {\n return ;\n}\n\nexport function CommandItem({\n className,\n ...props\n}: React.ComponentProps): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandSeparator({\n className,\n ...props\n}: React.ComponentProps): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandShortcut({\n className,\n ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n return (\n \n );\n}\n\nexport { CommandDialogPrimitive };\n", + "content": "\"use client\";\n\nimport { Dialog as CommandDialogPrimitive } from \"@base-ui/react/dialog\";\nimport { SearchIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport {\n Autocomplete,\n AutocompleteCollection,\n AutocompleteEmpty,\n AutocompleteGroup,\n AutocompleteGroupLabel,\n AutocompleteInput,\n AutocompleteItem,\n AutocompleteList,\n AutocompleteSeparator,\n} from \"@/registry/default/ui/autocomplete\";\n\nexport const CommandDialog: typeof CommandDialogPrimitive.Root =\n CommandDialogPrimitive.Root;\n\nexport const CommandDialogPortal: typeof CommandDialogPrimitive.Portal =\n CommandDialogPrimitive.Portal;\n\nexport const CommandCreateHandle: typeof CommandDialogPrimitive.createHandle =\n CommandDialogPrimitive.createHandle;\n\nexport function CommandDialogTrigger(\n props: CommandDialogPrimitive.Trigger.Props,\n): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandDialogBackdrop({\n className,\n ...props\n}: CommandDialogPrimitive.Backdrop.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandDialogViewport({\n className,\n ...props\n}: CommandDialogPrimitive.Viewport.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandDialogPopup({\n className,\n children,\n ...props\n}: CommandDialogPrimitive.Popup.Props): React.ReactElement {\n return (\n \n \n \n \n {children}\n \n \n \n );\n}\n\nexport function Command({\n autoHighlight = \"always\",\n keepHighlight = true,\n ...props\n}: React.ComponentProps): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandInput({\n className,\n placeholder = undefined,\n ...props\n}: React.ComponentProps): React.ReactElement {\n return (\n
\n }\n {...props}\n />\n
\n );\n}\n\nexport function CommandList({\n className,\n ...props\n}: React.ComponentProps): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandEmpty({\n className,\n ...props\n}: React.ComponentProps): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandPanel({\n className,\n ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandGroup({\n className,\n ...props\n}: React.ComponentProps): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandGroupLabel({\n className,\n ...props\n}: React.ComponentProps): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandCollection({\n ...props\n}: React.ComponentProps): React.ReactElement {\n return ;\n}\n\nexport function CommandItem({\n className,\n ...props\n}: React.ComponentProps): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandSeparator({\n className,\n ...props\n}: React.ComponentProps): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandShortcut({\n className,\n ...props\n}: React.ComponentProps<\"kbd\">): React.ReactElement {\n return (\n \n );\n}\n\nexport function CommandFooter({\n className,\n ...props\n}: React.ComponentProps<\"div\">): React.ReactElement {\n return (\n \n );\n}\n\nexport { CommandDialogPrimitive };\n", "type": "registry:ui" } ], diff --git a/apps/ui/public/r/drawer.json b/apps/ui/public/r/drawer.json index 260186dc5..8126d4147 100644 --- a/apps/ui/public/r/drawer.json +++ b/apps/ui/public/r/drawer.json @@ -11,7 +11,7 @@ "files": [ { "path": "registry/default/ui/drawer.tsx", - "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRightIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\ntype DrawerPosition = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nconst DrawerContext: React.Context<{ position: DrawerPosition }> =\n createContext<{ position: DrawerPosition }>({\n position: \"bottom\",\n });\n\nconst directionMap: Record<\n DrawerPosition,\n DrawerPrimitive.Root.Props[\"swipeDirection\"]\n> = {\n bottom: \"down\",\n left: \"left\",\n right: \"right\",\n top: \"up\",\n};\n\nexport const DrawerCreateHandle: typeof DrawerPrimitive.createHandle =\n DrawerPrimitive.createHandle;\n\nexport function Drawer({\n swipeDirection,\n position = \"bottom\",\n ...props\n}: DrawerPrimitive.Root.Props & {\n position?: DrawerPosition;\n}): React.ReactElement {\n return (\n \n \n \n );\n}\n\nexport const DrawerPortal: typeof DrawerPrimitive.Portal =\n DrawerPrimitive.Portal;\n\nexport function DrawerTrigger(\n props: DrawerPrimitive.Trigger.Props,\n): React.ReactElement {\n return ;\n}\n\nexport function DrawerClose(\n props: DrawerPrimitive.Close.Props,\n): React.ReactElement {\n return ;\n}\n\nexport function DrawerSwipeArea({\n className,\n position: positionProp,\n ...props\n}: DrawerPrimitive.SwipeArea.Props & {\n position?: DrawerPosition;\n}): React.ReactElement {\n const { position: contextPosition } = useContext(DrawerContext);\n const position = positionProp ?? contextPosition;\n\n return (\n \n );\n}\n\nexport function DrawerBackdrop({\n className,\n ...props\n}: DrawerPrimitive.Backdrop.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerViewport({\n className,\n position,\n variant = \"default\",\n ...props\n}: DrawerPrimitive.Viewport.Props & {\n position?: DrawerPosition;\n variant?: \"default\" | \"straight\" | \"inset\";\n}): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerPopup({\n className,\n children,\n showCloseButton = false,\n position: positionProp,\n variant = \"default\",\n showBar = false,\n ...props\n}: DrawerPrimitive.Popup.Props & {\n showCloseButton?: boolean;\n position?: DrawerPosition;\n variant?: \"default\" | \"straight\" | \"inset\";\n showBar?: boolean;\n}): React.ReactElement {\n const { position: contextPosition } = useContext(DrawerContext);\n const position = positionProp ?? contextPosition;\n\n return (\n \n \n \n \n {children}\n {showCloseButton && (\n }\n >\n \n \n )}\n {showBar && }\n \n \n \n );\n}\n\nexport function DrawerHeader({\n className,\n allowSelection = false,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n allowSelection?: boolean;\n}): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4\",\n !allowSelection && \"cursor-default\",\n className,\n ),\n \"data-slot\": \"drawer-header\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render: allowSelection ? : render,\n });\n}\n\nexport function DrawerFooter({\n className,\n variant = \"default\",\n allowSelection = true,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n variant?: \"default\" | \"bare\";\n allowSelection?: boolean;\n}): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end\",\n !allowSelection && \"cursor-default\",\n variant === \"default\" &&\n \"border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]\",\n variant === \"bare\" &&\n \"in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]\",\n className,\n ),\n \"data-slot\": \"drawer-footer\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render: allowSelection ? : render,\n });\n}\n\nexport function DrawerTitle({\n className,\n ...props\n}: DrawerPrimitive.Title.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerDescription({\n className,\n ...props\n}: DrawerPrimitive.Description.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerPanel({\n className,\n scrollFade = true,\n scrollable = true,\n allowSelection = true,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n scrollFade?: boolean;\n scrollable?: boolean;\n allowSelection?: boolean;\n}): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1\",\n !allowSelection && \"cursor-default\",\n className,\n ),\n \"data-slot\": \"drawer-panel\",\n };\n\n const content = useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render: allowSelection ? : render,\n });\n\n if (scrollable) {\n return (\n \n {content}\n \n );\n }\n\n return content;\n}\n\nexport function DrawerBar({\n className,\n position: positionProp,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n position?: DrawerPosition;\n}): React.ReactElement {\n const { position: contextPosition } = useContext(DrawerContext);\n const position = positionProp ?? contextPosition;\n const horizontal = position === \"left\" || position === \"right\";\n const defaultProps = {\n \"aria-hidden\": true as const,\n className: cn(\n \"absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input\",\n horizontal\n ? \"inset-y-0 before:h-12 before:w-1\"\n : \"inset-x-0 before:h-1 before:w-12\",\n position === \"top\" && \"bottom-0\",\n position === \"bottom\" && \"top-0\",\n position === \"left\" && \"right-0\",\n position === \"right\" && \"left-0\",\n className,\n ),\n \"data-slot\": \"drawer-bar\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport const DrawerContent: typeof DrawerPrimitive.Content =\n DrawerPrimitive.Content;\n\nexport function DrawerMenu({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"nav\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"-m-2 flex flex-col\", className),\n \"data-slot\": \"drawer-menu\",\n };\n\n return useRender({\n defaultTagName: \"nav\",\n props: mergeProps<\"nav\">(defaultProps, props),\n render,\n });\n}\n\nexport function DrawerMenuItem({\n className,\n variant = \"default\",\n render,\n disabled,\n ...props\n}: useRender.ComponentProps<\"button\"> & {\n variant?: \"default\" | \"destructive\";\n}): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\n className,\n ),\n \"data-slot\": \"drawer-menu-item\",\n \"data-variant\": variant,\n disabled,\n type: \"button\" as const,\n };\n\n return useRender({\n defaultTagName: \"button\",\n props: mergeProps<\"button\">(defaultProps, props),\n render,\n });\n}\n\nexport function DrawerMenuSeparator({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"mx-2 my-1 h-px bg-border\", className),\n \"data-slot\": \"drawer-menu-separator\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function DrawerMenuGroup({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"flex flex-col\", className),\n \"data-slot\": \"drawer-menu-group\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function DrawerMenuGroupLabel({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n className,\n ),\n \"data-slot\": \"drawer-menu-group-label\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function DrawerMenuTrigger({\n className,\n children,\n ...props\n}: DrawerPrimitive.Trigger.Props): React.ReactElement {\n return (\n \n {children}\n \n \n );\n}\n\nexport function DrawerMenuCheckboxItem({\n className,\n children,\n checked,\n defaultChecked,\n onCheckedChange,\n variant = \"default\",\n disabled,\n render,\n ...props\n}: CheckboxPrimitive.Root.Props & {\n variant?: \"default\" | \"switch\";\n render?: React.ReactElement;\n}): React.ReactElement {\n return (\n \n {variant === \"switch\" ? (\n <>\n {children}\n \n \n \n \n ) : (\n <>\n \n \n \n \n \n {children}\n \n )}\n \n );\n}\n\nexport function DrawerMenuRadioGroup({\n className,\n ...props\n}: RadioGroupPrimitive.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerMenuRadioItem({\n className,\n children,\n value,\n disabled,\n render,\n ...props\n}: RadioPrimitive.Root.Props & {\n value: string;\n render?: React.ReactElement;\n}): React.ReactElement {\n return (\n \n \n \n \n \n \n {children}\n \n );\n}\n\nexport { DrawerPrimitive };\n", + "content": "\"use client\";\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\";\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { Radio as RadioPrimitive } from \"@base-ui/react/radio\";\nimport { RadioGroup as RadioGroupPrimitive } from \"@base-ui/react/radio-group\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { ChevronRightIcon, XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\ntype DrawerPosition = \"right\" | \"left\" | \"top\" | \"bottom\";\n\nconst DrawerContext: React.Context<{ position: DrawerPosition }> =\n createContext<{ position: DrawerPosition }>({\n position: \"bottom\",\n });\n\nconst directionMap: Record<\n DrawerPosition,\n DrawerPrimitive.Root.Props[\"swipeDirection\"]\n> = {\n bottom: \"down\",\n left: \"left\",\n right: \"right\",\n top: \"up\",\n};\n\nexport const DrawerCreateHandle: typeof DrawerPrimitive.createHandle =\n DrawerPrimitive.createHandle;\n\nexport function Drawer({\n swipeDirection,\n position = \"bottom\",\n ...props\n}: DrawerPrimitive.Root.Props & {\n position?: DrawerPosition;\n}): React.ReactElement {\n return (\n \n \n \n );\n}\n\nexport const DrawerPortal: typeof DrawerPrimitive.Portal =\n DrawerPrimitive.Portal;\n\nexport function DrawerTrigger(\n props: DrawerPrimitive.Trigger.Props,\n): React.ReactElement {\n return ;\n}\n\nexport function DrawerClose(\n props: DrawerPrimitive.Close.Props,\n): React.ReactElement {\n return ;\n}\n\nexport function DrawerSwipeArea({\n className,\n position: positionProp,\n ...props\n}: DrawerPrimitive.SwipeArea.Props & {\n position?: DrawerPosition;\n}): React.ReactElement {\n const { position: contextPosition } = useContext(DrawerContext);\n const position = positionProp ?? contextPosition;\n\n return (\n \n );\n}\n\nexport function DrawerBackdrop({\n className,\n ...props\n}: DrawerPrimitive.Backdrop.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerViewport({\n className,\n position,\n variant = \"default\",\n ...props\n}: DrawerPrimitive.Viewport.Props & {\n position?: DrawerPosition;\n variant?: \"default\" | \"straight\" | \"inset\";\n}): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerPopup({\n className,\n children,\n showCloseButton = false,\n position: positionProp,\n variant = \"default\",\n showBar = false,\n ...props\n}: DrawerPrimitive.Popup.Props & {\n showCloseButton?: boolean;\n position?: DrawerPosition;\n variant?: \"default\" | \"straight\" | \"inset\";\n showBar?: boolean;\n}): React.ReactElement {\n const { position: contextPosition } = useContext(DrawerContext);\n const position = positionProp ?? contextPosition;\n\n return (\n \n \n \n \n {children}\n {showCloseButton && (\n }\n >\n \n \n )}\n {showBar && }\n \n \n \n );\n}\n\nexport function DrawerHeader({\n className,\n allowSelection = false,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n allowSelection?: boolean;\n}): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4\",\n !allowSelection && \"cursor-default\",\n className,\n ),\n \"data-slot\": \"drawer-header\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render: allowSelection ? : render,\n });\n}\n\nexport function DrawerFooter({\n className,\n variant = \"default\",\n allowSelection = true,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n variant?: \"default\" | \"bare\";\n allowSelection?: boolean;\n}): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end\",\n !allowSelection && \"cursor-default\",\n variant === \"default\" &&\n \"border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]\",\n variant === \"bare\" &&\n \"in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]\",\n className,\n ),\n \"data-slot\": \"drawer-footer\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render: allowSelection ? : render,\n });\n}\n\nexport function DrawerTitle({\n className,\n ...props\n}: DrawerPrimitive.Title.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerDescription({\n className,\n ...props\n}: DrawerPrimitive.Description.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerPanel({\n className,\n scrollFade = true,\n scrollable = true,\n allowSelection = true,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n scrollFade?: boolean;\n scrollable?: boolean;\n allowSelection?: boolean;\n}): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1\",\n !allowSelection && \"cursor-default\",\n className,\n ),\n \"data-slot\": \"drawer-panel\",\n };\n\n const content = useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render: allowSelection ? : render,\n });\n\n if (scrollable) {\n return (\n \n {content}\n \n );\n }\n\n return content;\n}\n\nexport function DrawerBar({\n className,\n position: positionProp,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n position?: DrawerPosition;\n}): React.ReactElement {\n const { position: contextPosition } = useContext(DrawerContext);\n const position = positionProp ?? contextPosition;\n const horizontal = position === \"left\" || position === \"right\";\n const defaultProps = {\n \"aria-hidden\": true as const,\n className: cn(\n \"absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input\",\n horizontal\n ? \"inset-y-0 before:h-12 before:w-1\"\n : \"inset-x-0 before:h-1 before:w-12\",\n position === \"top\" && \"bottom-0\",\n position === \"bottom\" && \"top-0\",\n position === \"left\" && \"right-0\",\n position === \"right\" && \"left-0\",\n className,\n ),\n \"data-slot\": \"drawer-bar\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport const DrawerContent: typeof DrawerPrimitive.Content =\n DrawerPrimitive.Content;\n\nexport function DrawerMenu({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"nav\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"-m-2 flex flex-col\", className),\n \"data-slot\": \"drawer-menu\",\n };\n\n return useRender({\n defaultTagName: \"nav\",\n props: mergeProps<\"nav\">(defaultProps, props),\n render,\n });\n}\n\nexport function DrawerMenuItem({\n className,\n variant = \"default\",\n render,\n disabled,\n ...props\n}: useRender.ComponentProps<\"button\"> & {\n variant?: \"default\" | \"destructive\";\n}): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0\",\n className,\n ),\n \"data-slot\": \"drawer-menu-item\",\n \"data-variant\": variant,\n disabled,\n type: \"button\" as const,\n };\n\n return useRender({\n defaultTagName: \"button\",\n props: mergeProps<\"button\">(defaultProps, props),\n render,\n });\n}\n\nexport function DrawerMenuSeparator({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"mx-2 my-1 h-px bg-border\", className),\n \"data-slot\": \"drawer-menu-separator\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function DrawerMenuGroup({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\"flex flex-col\", className),\n \"data-slot\": \"drawer-menu-group\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function DrawerMenuGroupLabel({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"px-2 py-1.5 font-medium text-muted-foreground text-xs\",\n className,\n ),\n \"data-slot\": \"drawer-menu-group-label\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function DrawerMenuTrigger({\n className,\n children,\n ...props\n}: DrawerPrimitive.Trigger.Props): React.ReactElement {\n return (\n \n {children}\n \n \n );\n}\n\nexport function DrawerMenuCheckboxItem({\n className,\n children,\n checked,\n defaultChecked,\n onCheckedChange,\n variant = \"default\",\n disabled,\n render,\n ...props\n}: CheckboxPrimitive.Root.Props & {\n variant?: \"default\" | \"switch\";\n render?: React.ReactElement;\n}): React.ReactElement {\n return (\n \n {variant === \"switch\" ? (\n <>\n {children}\n \n \n \n \n ) : (\n <>\n \n \n \n \n \n {children}\n \n )}\n \n );\n}\n\nexport function DrawerMenuRadioGroup({\n className,\n ...props\n}: RadioGroupPrimitive.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function DrawerMenuRadioItem({\n className,\n children,\n value,\n disabled,\n render,\n ...props\n}: RadioPrimitive.Root.Props & {\n value: string;\n render?: React.ReactElement;\n}): React.ReactElement {\n return (\n \n \n \n \n \n \n {children}\n \n );\n}\n\nexport { DrawerPrimitive };\n", "type": "registry:ui" } ], diff --git a/apps/ui/public/r/sheet.json b/apps/ui/public/r/sheet.json index 49afeffca..f0c4dce50 100644 --- a/apps/ui/public/r/sheet.json +++ b/apps/ui/public/r/sheet.json @@ -11,7 +11,7 @@ "files": [ { "path": "registry/default/ui/sheet.tsx", - "content": "\"use client\";\n\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const Sheet: typeof SheetPrimitive.Root = SheetPrimitive.Root;\n\nexport const SheetPortal: typeof SheetPrimitive.Portal = SheetPrimitive.Portal;\n\nexport function SheetTrigger(\n props: SheetPrimitive.Trigger.Props,\n): React.ReactElement {\n return ;\n}\n\nexport function SheetClose(\n props: SheetPrimitive.Close.Props,\n): React.ReactElement {\n return ;\n}\n\nexport function SheetBackdrop({\n className,\n ...props\n}: SheetPrimitive.Backdrop.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function SheetViewport({\n className,\n side,\n variant = \"default\",\n ...props\n}: SheetPrimitive.Viewport.Props & {\n side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n variant?: \"default\" | \"inset\";\n}): React.ReactElement {\n return (\n \n );\n}\n\nexport function SheetPopup({\n className,\n children,\n showCloseButton = true,\n side = \"right\",\n variant = \"default\",\n closeProps,\n ...props\n}: SheetPrimitive.Popup.Props & {\n showCloseButton?: boolean;\n side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n variant?: \"default\" | \"inset\";\n closeProps?: SheetPrimitive.Close.Props;\n}): React.ReactElement {\n return (\n \n \n \n \n {children}\n {showCloseButton && (\n }\n {...closeProps}\n >\n \n \n )}\n \n \n \n );\n}\n\nexport function SheetHeader({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"flex flex-col gap-2 p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pb-3 max-sm:pb-4\",\n className,\n ),\n \"data-slot\": \"sheet-header\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function SheetFooter({\n className,\n variant = \"default\",\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end\",\n variant === \"default\" && \"border-t bg-muted/72 py-4\",\n variant === \"bare\" &&\n \"in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pt-3 pt-4 pb-6\",\n className,\n ),\n \"data-slot\": \"sheet-footer\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function SheetTitle({\n className,\n ...props\n}: SheetPrimitive.Title.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function SheetDescription({\n className,\n ...props\n}: SheetPrimitive.Description.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function SheetPanel({\n className,\n scrollFade = true,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n scrollFade?: boolean;\n}): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-header])]:pt-1 in-[[data-slot=sheet-popup]:has([data-slot=sheet-footer]:not(.border-t))]:pb-1\",\n className,\n ),\n \"data-slot\": \"sheet-panel\",\n };\n\n return (\n \n {useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n })}\n \n );\n}\n\nexport {\n SheetPrimitive,\n SheetBackdrop as SheetOverlay,\n SheetPopup as SheetContent,\n};\n", + "content": "\"use client\";\n\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\";\nimport { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { XIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { ScrollArea } from \"@/registry/default/ui/scroll-area\";\n\nexport const Sheet: typeof SheetPrimitive.Root = SheetPrimitive.Root;\n\nexport const SheetPortal: typeof SheetPrimitive.Portal = SheetPrimitive.Portal;\n\nexport function SheetTrigger(\n props: SheetPrimitive.Trigger.Props,\n): React.ReactElement {\n return ;\n}\n\nexport function SheetClose(\n props: SheetPrimitive.Close.Props,\n): React.ReactElement {\n return ;\n}\n\nexport function SheetBackdrop({\n className,\n ...props\n}: SheetPrimitive.Backdrop.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function SheetViewport({\n className,\n side,\n variant = \"default\",\n ...props\n}: SheetPrimitive.Viewport.Props & {\n side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n variant?: \"default\" | \"inset\";\n}): React.ReactElement {\n return (\n \n );\n}\n\nexport function SheetPopup({\n className,\n children,\n showCloseButton = true,\n side = \"right\",\n variant = \"default\",\n closeProps,\n ...props\n}: SheetPrimitive.Popup.Props & {\n showCloseButton?: boolean;\n side?: \"right\" | \"left\" | \"top\" | \"bottom\";\n variant?: \"default\" | \"inset\";\n closeProps?: SheetPrimitive.Close.Props;\n}): React.ReactElement {\n return (\n \n \n \n \n {children}\n {showCloseButton && (\n }\n {...closeProps}\n >\n \n \n )}\n \n \n \n );\n}\n\nexport function SheetHeader({\n className,\n render,\n ...props\n}: useRender.ComponentProps<\"div\">): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"flex flex-col gap-2 p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pb-3 max-sm:pb-4\",\n className,\n ),\n \"data-slot\": \"sheet-header\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function SheetFooter({\n className,\n variant = \"default\",\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n variant?: \"default\" | \"bare\";\n}): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"flex flex-col-reverse gap-2 px-6 sm:flex-row sm:justify-end\",\n variant === \"default\" && \"border-t bg-muted/72 py-4\",\n variant === \"bare\" &&\n \"in-[[data-slot=sheet-popup]:has([data-slot=sheet-panel])]:pt-3 pt-4 pb-6\",\n className,\n ),\n \"data-slot\": \"sheet-footer\",\n };\n\n return useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n });\n}\n\nexport function SheetTitle({\n className,\n ...props\n}: SheetPrimitive.Title.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function SheetDescription({\n className,\n ...props\n}: SheetPrimitive.Description.Props): React.ReactElement {\n return (\n \n );\n}\n\nexport function SheetPanel({\n className,\n scrollFade = true,\n render,\n ...props\n}: useRender.ComponentProps<\"div\"> & {\n scrollFade?: boolean;\n}): React.ReactElement {\n const defaultProps = {\n className: cn(\n \"p-6 in-[[data-slot=sheet-popup]:has([data-slot=sheet-header])]:pt-1 in-[[data-slot=sheet-popup]:has([data-slot=sheet-footer]:not(.border-t))]:pb-1\",\n className,\n ),\n \"data-slot\": \"sheet-panel\",\n };\n\n return (\n \n {useRender({\n defaultTagName: \"div\",\n props: mergeProps<\"div\">(defaultProps, props),\n render,\n })}\n \n );\n}\n\nexport {\n SheetPrimitive,\n SheetBackdrop as SheetOverlay,\n SheetPopup as SheetContent,\n};\n", "type": "registry:ui" } ], diff --git a/apps/ui/registry/default/ui/command.tsx b/apps/ui/registry/default/ui/command.tsx index 2bfa7238f..a5b94e7d9 100644 --- a/apps/ui/registry/default/ui/command.tsx +++ b/apps/ui/registry/default/ui/command.tsx @@ -162,7 +162,10 @@ export function CommandPanel({ }: React.ComponentProps<"div">): React.ReactElement { return (
); diff --git a/apps/ui/registry/default/ui/drawer.tsx b/apps/ui/registry/default/ui/drawer.tsx index 820f4c7ad..cda9a1e56 100644 --- a/apps/ui/registry/default/ui/drawer.tsx +++ b/apps/ui/registry/default/ui/drawer.tsx @@ -128,6 +128,7 @@ export function DrawerViewport({ variant === "inset" && "px-(--inset) sm:[--inset:--spacing(4)]", variant === "inset" && position !== "bottom" && "pt-(--inset)", variant === "inset" && position !== "top" && "pb-(--inset)", + className, )} data-slot="drawer-viewport" {...props} diff --git a/apps/ui/registry/default/ui/sheet.tsx b/apps/ui/registry/default/ui/sheet.tsx index cca98ebd8..4d209a99f 100644 --- a/apps/ui/registry/default/ui/sheet.tsx +++ b/apps/ui/registry/default/ui/sheet.tsx @@ -59,6 +59,7 @@ export function SheetViewport({ side === "left" && "flex justify-start", side === "right" && "flex justify-end", variant === "inset" && "sm:p-4", + className, )} data-slot="sheet-viewport" {...props} diff --git a/packages/ui/src/components/command.tsx b/packages/ui/src/components/command.tsx index fa947b612..df9debdcb 100644 --- a/packages/ui/src/components/command.tsx +++ b/packages/ui/src/components/command.tsx @@ -162,7 +162,10 @@ export function CommandPanel({ }: React.ComponentProps<"div">): React.ReactElement { return (
); diff --git a/packages/ui/src/components/drawer.tsx b/packages/ui/src/components/drawer.tsx index 0dbda1f3d..287664f84 100644 --- a/packages/ui/src/components/drawer.tsx +++ b/packages/ui/src/components/drawer.tsx @@ -128,7 +128,7 @@ export function DrawerViewport({ variant === "inset" && "px-(--inset) sm:[--inset:--spacing(4)]", variant === "inset" && position !== "bottom" && "pt-(--inset)", variant === "inset" && position !== "top" && "pb-(--inset)", - className + className, )} data-slot="drawer-viewport" {...props} diff --git a/packages/ui/src/components/sheet.tsx b/packages/ui/src/components/sheet.tsx index 833b1b534..108161089 100644 --- a/packages/ui/src/components/sheet.tsx +++ b/packages/ui/src/components/sheet.tsx @@ -59,7 +59,7 @@ export function SheetViewport({ side === "left" && "flex justify-start", side === "right" && "flex justify-end", variant === "inset" && "sm:p-4", - className + className, )} data-slot="sheet-viewport" {...props}