@gentleduck/registry-ui 0.2.6 → 0.2.8

package/src/combobox/combobox.tsx

@@ -32,77 +32,97 @@ export type ComboboxProps<TData extends readonly ComboboxItemType[], TType exten
   children: (item: TData) => React.ReactNode
 }
 
-export function Combobox<TData extends readonly ComboboxItemType[], TType extends 'single' | 'multiple' = 'single'>({
-  value,
-  defaultValue,
-  items,
-  command,
-  commandInput,
-  commandEmpty = 'Nothing found.',
-  commandTriggerPlaceholder = 'Select item...',
-  popover,
-  popoverTrigger,
-  popoverContent,
-  withSearch = true,
-  showSelected = true,
-  children,
-}: ComboboxProps<TData, TType>) {
-  const { dir, ...popoverProps } = popover ?? {}
-  const direction = useDirection(dir as Direction)
-  const MAX_SELECTION = 2
-  const _value = value ?? defaultValue
+export const Combobox = React.forwardRef<
+  HTMLButtonElement,
+  ComboboxProps<readonly ComboboxItemType[], 'single' | 'multiple'>
+>(
+  (
+    {
+      value,
+      defaultValue,
+      items,
+      command,
+      commandInput,
+      commandEmpty = 'Nothing found.',
+      commandTriggerPlaceholder = 'Select item...',
+      popover,
+      popoverTrigger,
+      popoverContent,
+      withSearch = true,
+      showSelected = true,
+      children,
+    },
+    ref,
+  ) => {
+    const { dir, ...popoverProps } = popover ?? {}
+    const direction = useDirection(dir as Direction)
+    const MAX_SELECTION = 2
+    const _value = value ?? defaultValue
 
-  return (
-    <Popover {...popoverProps} dir={direction}>
-      <PopoverTrigger asChild>
-        <Button {...popoverTrigger} variant={popoverTrigger?.variant ?? 'dashed'}>
-          {popoverTrigger?.children}
-          {showSelected &&
-            (_value ? (
-              _value instanceof Array && _value.length ? (
-                <>
-                  <Separator orientation="vertical" />
-                  <div className="flex gap-1">
-                    {_value.length > MAX_SELECTION ? (
-                      <Badge className="px-2 py-0.75 rounded-sm font-normal" variant={'secondary'}>
-                        +{_value.length} Selected
-                      </Badge>
-                    ) : (
-                      _value.map((item) => (
-                        <Badge className="px-2 py-0.5 rounded-[3px] capitalize" key={item} variant={'secondary'}>
-                          {item}
+    return (
+      <Popover {...popoverProps} dir={direction}>
+        <PopoverTrigger asChild>
+          <Button ref={ref} {...popoverTrigger} variant={popoverTrigger?.variant ?? 'dashed'}>
+            {popoverTrigger?.children}
+            {showSelected &&
+              (_value ? (
+                _value instanceof Array && _value.length ? (
+                  <>
+                    <Separator orientation="vertical" />
+                    <div className="flex gap-1">
+                      {_value.length > MAX_SELECTION ? (
+                        <Badge className="px-2 py-0.75 rounded-sm font-normal" variant={'secondary'}>
+                          +{_value.length} Selected
                         </Badge>
-                      ))
-                    )}
-                  </div>
-                </>
+                      ) : (
+                        _value.map((item) => (
+                          <Badge className="px-2 py-0.5 rounded-[3px] capitalize" key={item} variant={'secondary'}>
+                            {item}
+                          </Badge>
+                        ))
+                      )}
+                    </div>
+                  </>
+                ) : (
+                  _value
+                )
               ) : (
-                _value
-              )
-            ) : (
-              commandTriggerPlaceholder
-            ))}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        {...popoverContent}
-        dir={direction}
-        className={cn('w-(--gentleduck-popover-trigger-width) p-0', popoverContent?.className)}>
-        <Command {...command}>
-          {withSearch && <CommandInput {...commandInput} className={cn('h-8 [&_svg]:size-4.5 px-2', commandInput)} />}
-          <CommandList>
-            {commandEmpty && <CommandEmpty>{commandEmpty}</CommandEmpty>}
-            {children(items)}
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  )
-}
+                commandTriggerPlaceholder
+              ))}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          {...popoverContent}
+          dir={direction}
+          className={cn('w-(--gentleduck-popover-trigger-width) p-0', popoverContent?.className)}>
+          <Command {...command}>
+            {withSearch && <CommandInput {...commandInput} className={cn('h-8 [&_svg]:size-4.5 px-2', commandInput)} />}
+            <CommandList>
+              {commandEmpty && <CommandEmpty>{commandEmpty}</CommandEmpty>}
+              {children(items)}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    )
+  },
+) as <TData extends readonly ComboboxItemType[], TType extends 'single' | 'multiple' = 'single'>(
+  props: ComboboxProps<TData, TType> & React.RefAttributes<HTMLButtonElement>,
+) => React.ReactElement
+;(Combobox as React.FC).displayName = 'Combobox'
 
-export function ComboxGroup({ children, ...props }: React.ComponentPropsWithoutRef<typeof CommandGroup>) {
-  return <CommandGroup {...props}>{children}</CommandGroup>
-}
+const ComboxGroup = React.forwardRef<
+  React.ComponentRef<typeof CommandGroup>,
+  React.ComponentPropsWithoutRef<typeof CommandGroup>
+>(({ children, ...props }, ref) => {
+  return (
+    <CommandGroup ref={ref} {...props}>
+      {children}
+    </CommandGroup>
+  )
+})
+ComboxGroup.displayName = 'ComboxGroup'
+export { ComboxGroup }
 
 type ComboboxItemProps<T extends ComboboxItemType> = Omit<
   React.ComponentPropsWithoutRef<typeof CommandItem>,
@@ -113,9 +133,13 @@ type ComboboxItemProps<T extends ComboboxItemType> = Omit<
   checked?: React.ComponentPropsWithoutRef<typeof Checkbox>['checked']
 }
 
-export function ComboboxItem<T extends ComboboxItemType>({ item, onSelect, checked, ...props }: ComboboxItemProps<T>) {
+export const ComboboxItem = React.forwardRef<
+  React.ComponentRef<typeof CommandItem>,
+  ComboboxItemProps<ComboboxItemType>
+>(({ item, onSelect, checked, ...props }, ref) => {
   return (
     <CommandItem
+      ref={ref}
       onSelect={() => {
         onSelect?.(item.value)
       }}
@@ -129,4 +153,7 @@ export function ComboboxItem<T extends ComboboxItemType>({ item, onSelect, check
       {item?.label}
     </CommandItem>
   )
-}
+}) as <T extends ComboboxItemType>(
+  props: ComboboxItemProps<T> & React.RefAttributes<React.ComponentRef<typeof CommandItem>>,
+) => React.ReactElement
+;(ComboboxItem as React.FC).displayName = 'ComboboxItem'

package/src/command/command.tsx

@@ -122,51 +122,47 @@ const CommandSeparator = React.forwardRef<
 ))
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName
 
-function CommandShortcut({
-  className,
-  keys,
-  onKeysPressed,
-  variant = 'default',
-  ref,
-  ...props
-}: CommandBadgeProps): React.JSX.Element {
-  const commands = React.useMemo(
-    () =>
-      keys && onKeysPressed
-        ? {
-            [keys]: {
-              description: keys,
-              execute: () => {
-                onKeysPressed()
+const CommandShortcut = React.forwardRef<HTMLElement, CommandBadgeProps>(
+  ({ className, keys, onKeysPressed, variant = 'default', ...props }, ref) => {
+    const commands = React.useMemo(
+      () =>
+        keys && onKeysPressed
+          ? {
+              [keys]: {
+                description: keys,
+                execute: () => {
+                  onKeysPressed()
+                },
+                name: keys,
               },
-              name: keys,
-            },
-          }
-        : {},
-    [keys, onKeysPressed],
-  )
+            }
+          : {},
+      [keys, onKeysPressed],
+    )
 
-  useKeyCommands(commands, { preventDefault: true })
+    useKeyCommands(commands, { preventDefault: true })
 
-  return (
-    <kbd
-      className={cn(
-        'focus:offset-2 pointer-events-none ms-auto inline-flex cursor-none select-none items-center gap-0.5 rounded-sm px-2 py-[.12rem] font-sans text-secondary-foreground text-sm tracking-widest transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring [&_svg]:size-3',
-        variant === 'secondary' && 'bg-secondary',
-        className,
-      )}
-      data-slot="command-badge"
-      ref={ref}
-      {...props}
-    />
-  )
-}
+    return (
+      <kbd
+        className={cn(
+          'focus:offset-2 pointer-events-none ms-auto inline-flex cursor-none select-none items-center gap-0.5 rounded-sm px-2 py-[.12rem] font-sans text-secondary-foreground text-sm tracking-widest transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring [&_svg]:size-3',
+          variant === 'secondary' && 'bg-secondary',
+          className,
+        )}
+        data-slot="command-badge"
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+CommandShortcut.displayName = 'CommandShortcut'
 
 function CommandDialog({
   children,
   shouldFilter,
   ...props
-}: React.ComponentPropsWithRef<typeof Dialog> & { shouldFilter?: boolean }): React.JSX.Element {
+}: React.ComponentPropsWithoutRef<typeof Dialog> & { shouldFilter?: boolean }) {
   return (
     <Dialog {...props}>
       <DialogContent className="h-125 max-w-full p-0 lg:w-[700px]">
@@ -179,6 +175,7 @@ function CommandDialog({
     </Dialog>
   )
 }
+CommandDialog.displayName = 'CommandDialog'
 
 function useCommandListContext(__scopeCommand: Parameters<typeof CommandPrimitive.useCommandContext>[1]) {
   return CommandPrimitive.useCommandContext('Command', __scopeCommand)

package/src/context-menu/context-menu.tsx

@@ -6,16 +6,22 @@ import { Check, ChevronRight, Circle } from 'lucide-react'
 import * as React from 'react'
 
 const ContextMenu = ContextMenuPrimitive.Root
+ContextMenu.displayName = 'ContextMenu'
 
 const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+ContextMenuTrigger.displayName = 'ContextMenuTrigger'
 
 const ContextMenuGroup = ContextMenuPrimitive.Group
+ContextMenuGroup.displayName = 'ContextMenuGroup'
 
 const ContextMenuPortal = ContextMenuPrimitive.Portal
+ContextMenuPortal.displayName = 'ContextMenuPortal'
 
 const ContextMenuSub = ContextMenuPrimitive.Sub
+ContextMenuSub.displayName = 'ContextMenuSub'
 
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+ContextMenuRadioGroup.displayName = 'ContextMenuRadioGroup'
 
 const ContextMenuSubTrigger = React.forwardRef<
   React.ComponentRef<typeof ContextMenuPrimitive.SubTrigger>,
@@ -154,9 +160,11 @@ const ContextMenuSeparator = React.forwardRef<
 ))
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
 
-const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn('ms-auto text-muted-foreground text-xs tracking-widest', className)} {...props} />
-}
+const ContextMenuShortcut = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, ...props }, ref) => (
+    <span ref={ref} className={cn('ms-auto text-muted-foreground text-xs tracking-widest', className)} {...props} />
+  ),
+)
 ContextMenuShortcut.displayName = 'ContextMenuShortcut'
 
 export {

package/src/dialog/dialog-responsive.tsx

@@ -127,6 +127,15 @@ function DialogCloseResponsive({
   return <DrawerClose {...props}>{children}</DrawerClose>
 }
 
+DialogResponsive.displayName = 'DialogResponsive'
+DialogTriggerResponsive.displayName = 'DialogTriggerResponsive'
+DialogContentResponsive.displayName = 'DialogContentResponsive'
+DialogHeaderResponsive.displayName = 'DialogHeaderResponsive'
+DialogFooterResponsive.displayName = 'DialogFooterResponsive'
+DialogTitleResponsive.displayName = 'DialogTitleResponsive'
+DialogDescriptionResponsive.displayName = 'DialogDescriptionResponsive'
+DialogCloseResponsive.displayName = 'DialogCloseResponsive'
+
 export {
   DialogResponsive,
   DialogTriggerResponsive,

package/src/dialog/dialog.tsx

@@ -6,12 +6,16 @@ import { X } from 'lucide-react'
 import * as React from 'react'
 
 const Dialog = DialogPrimitive.Root
+Dialog.displayName = 'Dialog'
 
 const DialogTrigger = DialogPrimitive.Trigger
+DialogTrigger.displayName = 'DialogTrigger'
 
 const DialogPortal = DialogPrimitive.Portal
+DialogPortal.displayName = 'DialogPortal'
 
 const DialogClose = DialogPrimitive.Close
+DialogClose.displayName = 'DialogClose'
 
 const DialogOverlay = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Overlay>,
@@ -53,13 +57,17 @@ const DialogContent = React.forwardRef<
 ))
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-start', className)} {...props} />
+const DialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 text-center sm:text-start', className)} {...props} />
+  ),
 )
 DialogHeader.displayName = 'DialogHeader'
 
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2', className)} {...props} />
+const DialogFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2', className)} {...props} />
+  ),
 )
 DialogFooter.displayName = 'DialogFooter'
 

package/src/dropdown-menu/dropdown-menu.tsx

@@ -6,16 +6,22 @@ import { Check, ChevronRight, Circle } from 'lucide-react'
 import * as React from 'react'
 
 const DropdownMenu = DropdownMenuPrimitive.Root
+DropdownMenu.displayName = 'DropdownMenu'
 
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+DropdownMenuTrigger.displayName = 'DropdownMenuTrigger'
 
 const DropdownMenuGroup = DropdownMenuPrimitive.Group
+DropdownMenuGroup.displayName = 'DropdownMenuGroup'
 
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+DropdownMenuPortal.displayName = 'DropdownMenuPortal'
 
 const DropdownMenuSub = DropdownMenuPrimitive.Sub
+DropdownMenuSub.displayName = 'DropdownMenuSub'
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+DropdownMenuRadioGroup.displayName = 'DropdownMenuRadioGroup'
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
@@ -157,9 +163,11 @@ const DropdownMenuSeparator = React.forwardRef<
 ))
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn('ms-auto text-xs tracking-widest opacity-60', className)} {...props} />
-}
+const DropdownMenuShortcut = React.forwardRef<HTMLSpanElement, React.HTMLAttributes<HTMLSpanElement>>(
+  ({ className, ...props }, ref) => (
+    <span ref={ref} className={cn('ms-auto text-xs tracking-widest opacity-60', className)} {...props} />
+  ),
+)
 DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
 
 export {

package/src/empty/empty.tsx

@@ -1,12 +1,14 @@
 import { cn } from '@gentleduck/libs/cn'
 import { type Direction, useDirection } from '@gentleduck/primitives/direction'
 import type { VariantProps } from '@gentleduck/variants'
+import React from 'react'
 import { emptyMediaVariants } from './empty.constants'
 
-function Empty({ className, dir, ...props }: React.ComponentProps<'div'>) {
+const Empty = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, dir, ...props }, ref) => {
   const direction = useDirection(dir as Direction)
   return (
     <div
+      ref={ref}
       className={cn(
         'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12',
         className,
@@ -16,40 +18,48 @@ function Empty({ className, dir, ...props }: React.ComponentProps<'div'>) {
       {...props}
     />
   )
-}
+})
+Empty.displayName = 'Empty'
 
-function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {
+const EmptyHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {
   return (
     <div
+      ref={ref}
       className={cn('flex max-w-sm flex-col items-center gap-2 text-center', className)}
       data-slot="empty-header"
       {...props}
     />
   )
-}
+})
+EmptyHeader.displayName = 'EmptyHeader'
 
-function EmptyMedia({
-  className,
-  variant = 'default',
-  ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {
+const EmptyMedia = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>
+>(({ className, variant = 'default', ...props }, ref) => {
   return (
     <div
+      ref={ref}
       className={cn(emptyMediaVariants({ className, variant }))}
       data-slot="empty-icon"
       data-variant={variant}
       {...props}
     />
   )
-}
+})
+EmptyMedia.displayName = 'EmptyMedia'
 
-function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return <div className={cn('font-medium text-lg tracking-tight', className)} data-slot="empty-title" {...props} />
-}
+const EmptyTitle = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {
+  return (
+    <div ref={ref} className={cn('font-medium text-lg tracking-tight', className)} data-slot="empty-title" {...props} />
+  )
+})
+EmptyTitle.displayName = 'EmptyTitle'
 
-function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
+const EmptyDescription = React.forwardRef<HTMLDivElement, React.ComponentProps<'p'>>(({ className, ...props }, ref) => {
   return (
     <div
+      ref={ref}
       className={cn(
         'text-muted-foreground text-sm/relaxed [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
         className,
@@ -58,16 +68,19 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {
       {...props}
     />
   )
-}
+})
+EmptyDescription.displayName = 'EmptyDescription'
 
-function EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {
+const EmptyContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(({ className, ...props }, ref) => {
   return (
     <div
+      ref={ref}
       className={cn('flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm', className)}
       data-slot="empty-content"
       {...props}
     />
   )
-}
+})
+EmptyContent.displayName = 'EmptyContent'
 
 export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia }