@gentleduck/registry-ui 0.2.6 → 0.2.8

package/src/field/field.tsx

@@ -3,63 +3,72 @@
 import { cn } from '@gentleduck/libs/cn'
 import { type Direction, useDirection } from '@gentleduck/primitives/direction'
 import type { VariantProps } from '@gentleduck/variants'
-import { useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { Label } from '../label'
 import { Separator } from '../separator'
 import { fieldVariants } from './field.constants'
 
-function FieldSet({ className, dir, ...props }: React.ComponentProps<'fieldset'>) {
-  const direction = useDirection(dir as Direction)
-  return (
-    <fieldset
-      className={cn(
-        'flex flex-col gap-6',
-        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
-        className,
-      )}
-      dir={direction}
-      data-slot="field-set"
-      {...props}
-    />
-  )
-}
-
-function FieldLegend({
-  className,
-  variant = 'legend',
-  ...props
-}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
+const FieldSet = React.forwardRef<HTMLFieldSetElement, React.ComponentPropsWithoutRef<'fieldset'>>(
+  ({ className, dir, ...props }, ref) => {
+    const direction = useDirection(dir as Direction)
+    return (
+      <fieldset
+        ref={ref}
+        className={cn(
+          'flex flex-col gap-6',
+          'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
+          className,
+        )}
+        dir={direction}
+        data-slot="field-set"
+        {...props}
+      />
+    )
+  },
+)
+FieldSet.displayName = 'FieldSet'
+
+const FieldLegend = React.forwardRef<
+  HTMLLegendElement,
+  React.ComponentPropsWithoutRef<'legend'> & { variant?: 'legend' | 'label' }
+>(({ className, variant = 'legend', ...props }, ref) => {
   return (
     <legend
+      ref={ref}
       className={cn('mb-3 font-medium', 'data-[variant=legend]:text-base', 'data-[variant=label]:text-sm', className)}
       data-slot="field-legend"
       data-variant={variant}
       {...props}
     />
   )
-}
-
-function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      className={cn(
-        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
-        className,
-      )}
-      data-slot="field-group"
-      {...props}
-    />
-  )
-}
+})
+FieldLegend.displayName = 'FieldLegend'
 
-function Field({
-  className,
-  orientation = 'vertical',
-  ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
+const FieldGroup = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
+          className,
+        )}
+        data-slot="field-group"
+        {...props}
+      />
+    )
+  },
+)
+FieldGroup.displayName = 'FieldGroup'
+
+const Field = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<'div'> & VariantProps<typeof fieldVariants>
+>(({ className, orientation = 'vertical', ...props }, ref) => {
   return (
     // biome-ignore lint/a11y/useSemanticElements: field group role is semantically correct for form field grouping
     <div
+      ref={ref}
       className={cn(fieldVariants({ orientation }), className)}
       data-orientation={orientation}
       data-slot="field"
@@ -67,70 +76,87 @@ function Field({
       {...props}
     />
   )
-}
+})
+Field.displayName = 'Field'
 
-function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      className={cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', className)}
-      data-slot="field-content"
-      {...props}
-    />
-  )
-}
-
-function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
-  return (
-    <Label
-      className={cn(
-        'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
-        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
-        'has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10',
-        className,
-      )}
-      data-slot="field-label"
-      {...props}
-    />
-  )
-}
+const FieldContent = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('group/field-content flex flex-1 flex-col gap-1.5 leading-snug', className)}
+        data-slot="field-content"
+        {...props}
+      />
+    )
+  },
+)
+FieldContent.displayName = 'FieldContent'
 
-function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      className={cn(
-        'flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50',
-        className,
-      )}
-      data-slot="field-label"
-      {...props}
-    />
-  )
-}
+const FieldLabel = React.forwardRef<HTMLLabelElement, React.ComponentPropsWithoutRef<typeof Label>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <Label
+        ref={ref}
+        className={cn(
+          'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50',
+          'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4',
+          'has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10',
+          className,
+        )}
+        data-slot="field-label"
+        {...props}
+      />
+    )
+  },
+)
+FieldLabel.displayName = 'FieldLabel'
 
-function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
-  return (
-    <p
-      className={cn(
-        'font-normal text-muted-foreground text-sm leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
-        'nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5',
-        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-        className,
-      )}
-      data-slot="field-description"
-      {...props}
-    />
-  )
-}
+const FieldTitle = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'flex w-fit items-center gap-2 font-medium text-sm leading-snug group-data-[disabled=true]/field:opacity-50',
+          className,
+        )}
+        data-slot="field-label"
+        {...props}
+      />
+    )
+  },
+)
+FieldTitle.displayName = 'FieldTitle'
 
-function FieldSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<'div'> & {
-  children?: React.ReactNode
-}) {
+const FieldDescription = React.forwardRef<HTMLParagraphElement, React.ComponentPropsWithoutRef<'p'>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <p
+        ref={ref}
+        className={cn(
+          'font-normal text-muted-foreground text-sm leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
+          'nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5',
+          '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
+          className,
+        )}
+        data-slot="field-description"
+        {...props}
+      />
+    )
+  },
+)
+FieldDescription.displayName = 'FieldDescription'
+
+const FieldSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<'div'> & {
+    children?: React.ReactNode
+  }
+>(({ children, className, ...props }, ref) => {
   return (
     <div
+      ref={ref}
       className={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}
       data-content={!!children}
       data-slot="field-separator"
@@ -145,16 +171,15 @@ function FieldSeparator({
       )}
     </div>
   )
-}
+})
+FieldSeparator.displayName = 'FieldSeparator'
 
-function FieldError({
-  className,
-  children,
-  errors,
-  ...props
-}: React.ComponentProps<'div'> & {
-  errors?: Array<{ message?: string } | undefined>
-}) {
+const FieldError = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<'div'> & {
+    errors?: Array<{ message?: string } | undefined>
+  }
+>(({ className, children, errors, ...props }, ref) => {
   const content = useMemo(() => {
     if (children) {
       return children
@@ -182,6 +207,7 @@ function FieldError({
 
   return (
     <div
+      ref={ref}
       className={cn('font-normal text-destructive text-sm', className)}
       data-slot="field-error"
       role="alert"
@@ -189,7 +215,8 @@ function FieldError({
       {content}
     </div>
   )
-}
+})
+FieldError.displayName = 'FieldError'
 
 export {
   Field,

package/src/json-editor/json-editor.tsx

@@ -421,3 +421,4 @@ export function JsonTextareaField<TFieldValues extends FieldValues>(
     </Field>
   )
 }
+JsonTextareaField.displayName = 'JsonTextareaField'

package/src/json-editor/json-editor.view.tsx

@@ -108,3 +108,4 @@ export function JsonEditorView({
     </div>
   )
 }
+JsonEditorView.displayName = 'JsonEditorView'

package/src/menubar/menubar.tsx

@@ -7,18 +7,23 @@ import { Check, ChevronRight, Circle } from 'lucide-react'
 import * as React from 'react'
 
 const MenubarMenu: typeof MenubarPrimitive.Menu = MenubarPrimitive.Menu
+MenubarMenu.displayName = 'MenubarMenu'
 
 const MenubarGroup = MenubarPrimitive.Group
+MenubarGroup.displayName = 'MenubarGroup'
 
 const MenubarPortal = MenubarPrimitive.Portal
+MenubarPortal.displayName = 'MenubarPortal'
 
 function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
   return <MenubarPrimitive.RadioGroup {...props} />
 }
+MenubarRadioGroup.displayName = 'MenubarRadioGroup'
 
 function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
   return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
 }
+MenubarSub.displayName = 'MenubarSub'
 
 const Menubar = React.forwardRef<
   React.ComponentRef<typeof MenubarPrimitive.Root>,
@@ -188,9 +193,11 @@ const MenubarSeparator = React.forwardRef<
 ))
 MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
 
-const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return <span className={cn('ms-auto text-muted-foreground text-xs tracking-widest', className)} {...props} />
-}
+const MenubarShortcut = 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} />
+  ),
+)
 MenubarShortcut.displayName = 'MenubarShortcut'
 
 export {

package/src/popover/popover.tsx

@@ -5,10 +5,13 @@ import * as PopoverPrimitive from '@gentleduck/primitives/popover'
 import * as React from 'react'
 
 const Popover = PopoverPrimitive.Root
+Popover.displayName = 'Popover'
 
 const PopoverTrigger: typeof PopoverPrimitive.Trigger = PopoverPrimitive.Trigger
+PopoverTrigger.displayName = 'PopoverTrigger'
 
 const PopoverAnchor: typeof PopoverPrimitive.Anchor = PopoverPrimitive.Anchor
+PopoverAnchor.displayName = 'PopoverAnchor'
 
 const PopoverContent = React.forwardRef<
   React.ComponentRef<typeof PopoverPrimitive.Content>,
@@ -31,5 +34,6 @@ const PopoverContent = React.forwardRef<
 PopoverContent.displayName = PopoverPrimitive.Content.displayName
 
 export const PopoverClose: typeof PopoverPrimitive.Close = PopoverPrimitive.Close
+PopoverClose.displayName = 'PopoverClose'
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

package/src/preview-panel/preview-panel-dialog.tsx

@@ -2,98 +2,104 @@
 
 import { cn } from '@gentleduck/libs/cn'
 import { Maximize2 } from 'lucide-react'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
 import { Button } from '../button'
 import { Dialog, DialogContent, DialogTrigger } from '../dialog'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../tooltip'
 import { PreviewPanel } from './preview-panel'
 import type { PreviewPanelDialogProps, PreviewPanelState } from './preview-panel.types'
 
-function PreviewPanelDialog({
-  children,
-  html,
-  className,
-  panelClassName,
-  maxHeight,
-  minZoom = 0.25,
-  maxZoom = 4,
-  initialZoom = 1,
-  showControls = true,
-  syncPanels = true,
-  fullscreenText = 'Open fullscreen',
-}: PreviewPanelDialogProps & { fullscreenText?: string }) {
-  const [sharedState, setSharedState] = useState<PreviewPanelState | undefined>(undefined)
+const PreviewPanelDialog = React.forwardRef<HTMLDivElement, PreviewPanelDialogProps & { fullscreenText?: string }>(
+  (
+    {
+      children,
+      html,
+      className,
+      panelClassName,
+      maxHeight,
+      minZoom = 0.25,
+      maxZoom = 4,
+      initialZoom = 1,
+      showControls = true,
+      syncPanels = true,
+      fullscreenText = 'Open fullscreen',
+    },
+    ref,
+  ) => {
+    const [sharedState, setSharedState] = useState<PreviewPanelState | undefined>(undefined)
 
-  // Ref tracks whether a state update is already scheduled this frame.
-  // Prevents multiple setState calls per animation frame when both
-  // panels emit state changes simultaneously.
-  const pendingRef = useRef(false)
+    // Ref tracks whether a state update is already scheduled this frame.
+    // Prevents multiple setState calls per animation frame when both
+    // panels emit state changes simultaneously.
+    const pendingRef = useRef(false)
 
-  const handleStateChange = useCallback(
-    (state: PreviewPanelState) => {
-      if (!syncPanels) return
-      if (pendingRef.current) return
-      pendingRef.current = true
-      requestAnimationFrame(() => {
-        pendingRef.current = false
-        setSharedState(state)
-      })
-    },
-    [syncPanels],
-  )
+    const handleStateChange = useCallback(
+      (state: PreviewPanelState) => {
+        if (!syncPanels) return
+        if (pendingRef.current) return
+        pendingRef.current = true
+        requestAnimationFrame(() => {
+          pendingRef.current = false
+          setSharedState(state)
+        })
+      },
+      [syncPanels],
+    )
 
-  const contentProps = useMemo(() => (html ? { html } : { children }), [html, children])
+    const contentProps = useMemo(() => (html ? { html } : { children }), [html, children])
 
-  const dialogPanelClassName = useMemo(() => cn('min-h-[70vh]', panelClassName), [panelClassName])
+    const dialogPanelClassName = useMemo(() => cn('min-h-[70vh]', panelClassName), [panelClassName])
 
-  return (
-    <div className={cn('group relative', className)}>
-      <div className="relative overflow-hidden rounded-lg border bg-card">
-        <PreviewPanel
-          {...contentProps}
-          maxHeight={maxHeight}
-          minZoom={minZoom}
-          maxZoom={maxZoom}
-          initialZoom={initialZoom}
-          showControls={showControls}
-          className={panelClassName}
-          onStateChange={handleStateChange}
-          syncState={syncPanels ? sharedState : undefined}
-        />
+    return (
+      <div ref={ref} className={cn('group relative', className)}>
+        <div className="relative overflow-hidden rounded-lg border bg-card">
+          <PreviewPanel
+            {...contentProps}
+            maxHeight={maxHeight}
+            minZoom={minZoom}
+            maxZoom={maxZoom}
+            initialZoom={initialZoom}
+            showControls={showControls}
+            className={panelClassName}
+            onStateChange={handleStateChange}
+            syncState={syncPanels ? sharedState : undefined}
+          />
 
-        <TooltipProvider>
-          <Dialog>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <DialogTrigger asChild>
-                  <Button
-                    variant="ghost"
-                    size="icon-sm"
-                    icon={<Maximize2 aria-hidden="true" />}
-                    aria-label={fullscreenText}
-                    className="absolute end-3 bottom-3 z-10 border bg-background/80 backdrop-blur-sm"
-                  />
-                </DialogTrigger>
-              </TooltipTrigger>
-              <TooltipContent>{fullscreenText}</TooltipContent>
-            </Tooltip>
-            <DialogContent className="max-h-[85vh] max-w-[90vw] overflow-auto p-0">
-              <PreviewPanel
-                {...contentProps}
-                minZoom={minZoom}
-                maxZoom={maxZoom}
-                initialZoom={initialZoom}
-                showControls={showControls}
-                className={dialogPanelClassName}
-                onStateChange={handleStateChange}
-                syncState={syncPanels ? sharedState : undefined}
-              />
-            </DialogContent>
-          </Dialog>
-        </TooltipProvider>
+          <TooltipProvider>
+            <Dialog>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <DialogTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      icon={<Maximize2 aria-hidden="true" />}
+                      aria-label={fullscreenText}
+                      className="absolute end-3 bottom-3 z-10 border bg-background/80 backdrop-blur-sm"
+                    />
+                  </DialogTrigger>
+                </TooltipTrigger>
+                <TooltipContent>{fullscreenText}</TooltipContent>
+              </Tooltip>
+              <DialogContent className="max-h-[85vh] max-w-[90vw] overflow-auto p-0">
+                <PreviewPanel
+                  {...contentProps}
+                  minZoom={minZoom}
+                  maxZoom={maxZoom}
+                  initialZoom={initialZoom}
+                  showControls={showControls}
+                  className={dialogPanelClassName}
+                  onStateChange={handleStateChange}
+                  syncState={syncPanels ? sharedState : undefined}
+                />
+              </DialogContent>
+            </Dialog>
+          </TooltipProvider>
+        </div>
       </div>
-    </div>
-  )
-}
+    )
+  },
+)
+PreviewPanelDialog.displayName = 'PreviewPanelDialog'
 
 export { PreviewPanelDialog }