@gentleduck/registry-ui 0.2.5 → 0.2.8

package/src/calendar/calendar.tsx

@@ -7,154 +7,174 @@ import * as React from 'react'
 import { type DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker'
 import { Button, buttonVariants } from '../button'
 
-function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  captionLayout = 'label',
-  buttonVariant = 'ghost',
-  formatters,
-  components,
-  dir,
-  ...props
-}: React.ComponentProps<typeof DayPicker> & {
-  buttonVariant?: React.ComponentProps<typeof Button>['variant']
-}) {
-  const direction = useDirection(dir as Direction)
-  const defaultClassNames = getDefaultClassNames()
-  const localeTag = React.useMemo(() => {
-    const code = props.locale?.code
-    if (!code) return undefined
-    return code.startsWith('ar') ? `${code}-u-nu-arab` : code
-  }, [props.locale])
+function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]): React.RefCallback<T> {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') {
+        ref(node)
+      } else if (ref != null) {
+        ;(ref as React.MutableRefObject<T | null>).current = node
+      }
+    }
+  }
+}
 
-  const monthFormatter = React.useMemo(() => {
-    return new Intl.DateTimeFormat(localeTag, { month: 'short' })
-  }, [localeTag])
+const Calendar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>['variant']
+  }
+>(
+  (
+    {
+      className,
+      classNames,
+      showOutsideDays = true,
+      captionLayout = 'label',
+      buttonVariant = 'ghost',
+      formatters,
+      components,
+      dir,
+      ...props
+    },
+    ref,
+  ) => {
+    const direction = useDirection(dir as Direction)
+    const defaultClassNames = getDefaultClassNames()
+    const localeTag = React.useMemo(() => {
+      const code = props.locale?.code
+      if (!code) return undefined
+      return code.startsWith('ar') ? `${code}-u-nu-arab` : code
+    }, [props.locale])
 
-  const captionFormatter = React.useMemo(() => {
-    return new Intl.DateTimeFormat(localeTag, { month: 'long', year: 'numeric' })
-  }, [localeTag])
+    const monthFormatter = React.useMemo(() => {
+      return new Intl.DateTimeFormat(localeTag, { month: 'short' })
+    }, [localeTag])
 
-  const numberFormatter = React.useMemo(() => {
-    return new Intl.NumberFormat(localeTag)
-  }, [localeTag])
+    const captionFormatter = React.useMemo(() => {
+      return new Intl.DateTimeFormat(localeTag, { month: 'long', year: 'numeric' })
+    }, [localeTag])
 
-  const formatLocalizedNumber = React.useCallback(
-    (value: number) => {
-      return numberFormatter.format(value)
-    },
-    [numberFormatter],
-  )
+    const numberFormatter = React.useMemo(() => {
+      return new Intl.NumberFormat(localeTag)
+    }, [localeTag])
 
-  return (
-    <DayPicker
-      dir={direction}
-      captionLayout={captionLayout}
-      className={cn(
-        'group/calendar bg-background in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent p-3 [--cell-size:--spacing(8)]',
-        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
-        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
-        className,
-      )}
-      classNames={{
-        button_next: cn(
-          buttonVariants({ variant: buttonVariant }),
-          'size-(--cell-size) select-none p-0 aria-disabled:opacity-50',
-          defaultClassNames.button_next,
-        ),
-        button_previous: cn(
-          buttonVariants({ variant: buttonVariant }),
-          'size-(--cell-size) select-none p-0 aria-disabled:opacity-50',
-          defaultClassNames.button_previous,
-        ),
-        caption_label: cn(
-          'select-none font-medium',
-          captionLayout === 'label'
-            ? 'text-sm'
-            : 'flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
-          defaultClassNames.caption_label,
-        ),
-        day: cn(
-          'group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-s-md [&:last-child[data-selected=true]_button]:rounded-e-md',
-          defaultClassNames.day,
-        ),
-        disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
-        dropdown: cn('absolute inset-0 bg-popover opacity-0', defaultClassNames.dropdown),
-        dropdown_root: cn(
-          'relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50',
-          defaultClassNames.dropdown_root,
-        ),
-        dropdowns: cn(
-          'flex h-(--cell-size) w-full items-center justify-center gap-1.5 font-medium text-sm',
-          defaultClassNames.dropdowns,
-        ),
-        hidden: cn('invisible', defaultClassNames.hidden),
-        month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
-        month_caption: cn(
-          'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',
-          defaultClassNames.month_caption,
-        ),
-        months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),
-        nav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', defaultClassNames.nav),
-        outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
-        range_end: cn('rounded-e-md bg-accent', defaultClassNames.range_end),
-        range_middle: cn('rounded-none', defaultClassNames.range_middle),
-        range_start: cn('rounded-s-md bg-accent', defaultClassNames.range_start),
-        root: cn('w-fit', defaultClassNames.root),
-        table: 'w-full border-collapse',
-        today: cn(
-          'rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none',
-          defaultClassNames.today,
-        ),
-        week: cn('mt-2 flex w-full', defaultClassNames.week),
-        week_number: cn('select-none text-[0.8rem] text-muted-foreground', defaultClassNames.week_number),
-        week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),
-        weekday: cn(
-          'flex-1 select-none rounded-md font-normal text-[0.8rem] text-muted-foreground',
-          defaultClassNames.weekday,
-        ),
-        weekdays: cn('flex', defaultClassNames.weekdays),
-        ...classNames,
-      }}
-      components={{
-        Chevron: ({ className, orientation, ...props }) => {
-          if (orientation === 'left') {
-            return <ChevronLeftIcon className={cn('size-4', className)} {...props} />
-          }
+    const formatLocalizedNumber = React.useCallback(
+      (value: number) => {
+        return numberFormatter.format(value)
+      },
+      [numberFormatter],
+    )
 
-          if (orientation === 'right') {
-            return <ChevronRightIcon className={cn('size-4', className)} {...props} />
-          }
+    return (
+      <DayPicker
+        dir={direction}
+        captionLayout={captionLayout}
+        className={cn(
+          'group/calendar bg-background in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent p-3 [--cell-size:--spacing(8)]',
+          String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+          String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+          className,
+        )}
+        classNames={{
+          button_next: cn(
+            buttonVariants({ variant: buttonVariant }),
+            'size-(--cell-size) select-none p-0 aria-disabled:opacity-50',
+            defaultClassNames.button_next,
+          ),
+          button_previous: cn(
+            buttonVariants({ variant: buttonVariant }),
+            'size-(--cell-size) select-none p-0 aria-disabled:opacity-50',
+            defaultClassNames.button_previous,
+          ),
+          caption_label: cn(
+            'select-none font-medium',
+            captionLayout === 'label'
+              ? 'text-sm'
+              : 'flex h-8 items-center gap-1 rounded-md ps-2 pe-1 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
+            defaultClassNames.caption_label,
+          ),
+          day: cn(
+            'group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-s-md [&:last-child[data-selected=true]_button]:rounded-e-md',
+            defaultClassNames.day,
+          ),
+          disabled: cn('text-muted-foreground opacity-50', defaultClassNames.disabled),
+          dropdown: cn('absolute inset-0 bg-popover opacity-0', defaultClassNames.dropdown),
+          dropdown_root: cn(
+            'relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50',
+            defaultClassNames.dropdown_root,
+          ),
+          dropdowns: cn(
+            'flex h-(--cell-size) w-full items-center justify-center gap-1.5 font-medium text-sm',
+            defaultClassNames.dropdowns,
+          ),
+          hidden: cn('invisible', defaultClassNames.hidden),
+          month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
+          month_caption: cn(
+            'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',
+            defaultClassNames.month_caption,
+          ),
+          months: cn('relative flex flex-col gap-4 md:flex-row', defaultClassNames.months),
+          nav: cn('absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1', defaultClassNames.nav),
+          outside: cn('text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside),
+          range_end: cn('rounded-e-md bg-accent', defaultClassNames.range_end),
+          range_middle: cn('rounded-none', defaultClassNames.range_middle),
+          range_start: cn('rounded-s-md bg-accent', defaultClassNames.range_start),
+          root: cn('w-fit', defaultClassNames.root),
+          table: 'w-full border-collapse',
+          today: cn(
+            'rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none',
+            defaultClassNames.today,
+          ),
+          week: cn('mt-2 flex w-full', defaultClassNames.week),
+          week_number: cn('select-none text-[0.8rem] text-muted-foreground', defaultClassNames.week_number),
+          week_number_header: cn('w-(--cell-size) select-none', defaultClassNames.week_number_header),
+          weekday: cn(
+            'flex-1 select-none rounded-md font-normal text-[0.8rem] text-muted-foreground',
+            defaultClassNames.weekday,
+          ),
+          weekdays: cn('flex', defaultClassNames.weekdays),
+          ...classNames,
+        }}
+        components={{
+          Chevron: ({ className, orientation, ...props }) => {
+            if (orientation === 'left') {
+              return <ChevronLeftIcon className={cn('size-4', className)} {...props} />
+            }
 
-          return <ChevronDownIcon className={cn('size-4', className)} {...props} />
-        },
-        DayButton: CalendarDayButton,
-        Root: ({ className, rootRef, ...props }) => {
-          return <div className={cn(className)} data-slot="calendar" ref={rootRef} {...props} />
-        },
-        WeekNumber: ({ children, ...props }) => {
-          return (
-            <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">{children}</div>
-            </td>
-          )
-        },
-        ...components,
-      }}
-      formatters={{
-        formatCaption: (date) => captionFormatter.format(date),
-        formatDay: (date) => formatLocalizedNumber(date.getDate()),
-        formatMonthDropdown: (date) => monthFormatter.format(date),
-        formatWeekNumber: (weekNumber) => formatLocalizedNumber(weekNumber),
-        formatYearDropdown: (date) => String(date.getFullYear()),
-        ...formatters,
-      }}
-      showOutsideDays={showOutsideDays}
-      {...props}
-    />
-  )
-}
+            if (orientation === 'right') {
+              return <ChevronRightIcon className={cn('size-4', className)} {...props} />
+            }
+
+            return <ChevronDownIcon className={cn('size-4', className)} {...props} />
+          },
+          DayButton: CalendarDayButton,
+          Root: ({ className, rootRef, ...props }) => {
+            return <div className={cn(className)} data-slot="calendar" ref={mergeRefs(ref, rootRef)} {...props} />
+          },
+          WeekNumber: ({ children, ...props }) => {
+            return (
+              <td {...props}>
+                <div className="flex size-(--cell-size) items-center justify-center text-center">{children}</div>
+              </td>
+            )
+          },
+          ...components,
+        }}
+        formatters={{
+          formatCaption: (date) => captionFormatter.format(date),
+          formatDay: (date) => formatLocalizedNumber(date.getDate()),
+          formatMonthDropdown: (date) => monthFormatter.format(date),
+          formatWeekNumber: (weekNumber) => formatLocalizedNumber(weekNumber),
+          formatYearDropdown: (date) => String(date.getFullYear()),
+          ...formatters,
+        }}
+        showOutsideDays={showOutsideDays}
+        {...props}
+      />
+    )
+  },
+)
 Calendar.displayName = 'Calendar'
 
 function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>) {

package/src/carousel/carousel.tsx

@@ -100,6 +100,7 @@ const Carousel = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLDivEleme
           scrollNext,
           scrollPrev,
         }}>
+        {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: carousel is a custom widget needing roledescription */}
         <section
           aria-roledescription="carousel"
           className={cn('relative', className)}

package/src/chart/__test__/chart.test.tsx

@@ -0,0 +1,40 @@
+import { describe, expect, test } from 'bun:test'
+import * as React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { Bar, BarChart, XAxis } from 'recharts'
+import { ChartContainer } from '../chart'
+
+const data = [{ name: 'alpha', value: 12 }]
+
+describe('registry-ui chart', () => {
+  test('ChartContainer server render does not emit invalid size warnings', () => {
+    const originalWarn = console.warn
+    const warnings: string[] = []
+
+    console.warn = (...args: unknown[]) => {
+      warnings.push(args.map((value) => String(value)).join(' '))
+    }
+
+    try {
+      const html = renderToStaticMarkup(
+        <ChartContainer
+          config={{
+            value: {
+              color: 'hsl(var(--chart-1))',
+              label: 'Value',
+            },
+          }}>
+          <BarChart accessibilityLayer data={data}>
+            <XAxis dataKey="name" hide />
+            <Bar dataKey="value" fill="var(--color-value)" radius={8} />
+          </BarChart>
+        </ChartContainer>,
+      )
+
+      expect(html).toContain('data-slot="chart-container"')
+      expect(warnings.some((message) => message.includes('The width(') && message.includes('height('))).toBe(false)
+    } finally {
+      console.warn = originalWarn
+    }
+  })
+})

package/src/chart/chart.tsx

@@ -15,6 +15,7 @@ import type {
 
 // Format: { THEME_NAME: CSS_SELECTOR }
 export const THEMES = { dark: '.dark', light: '' } as const
+const DEFAULT_CHART_INITIAL_DIMENSION = { width: 640, height: 360 } as const
 
 const ChartContext = React.createContext<ChartContextProps | null>(null)
 
@@ -28,7 +29,7 @@ function useChart() {
   return context
 }
 
-const ChartContainer = ({ id, className, children, config, ref, dir, ...props }: ChartContainerProps) => {
+function ChartContainer({ id, className, children, config, ref, dir, ...props }: ChartContainerProps) {
   const uniqueId = React.useId()
   const chartId = `chart-${id || uniqueId.replace(/:/g, '')}`
   const direction = useDirection(dir as Direction)
@@ -46,13 +47,16 @@ const ChartContainer = ({ id, className, children, config, ref, dir, ...props }:
         dir={direction}
         ref={ref}>
         <ChartStyle config={config} id={chartId} />
-        <RechartsPrimitive.ResponsiveContainer minWidth={0}>{children}</RechartsPrimitive.ResponsiveContainer>
+        <RechartsPrimitive.ResponsiveContainer initialDimension={DEFAULT_CHART_INITIAL_DIMENSION} minWidth={0}>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
   )
 }
+ChartContainer.displayName = 'ChartContainer'
 
-const ChartStyle = ({ id, config }: ChartStyleProps) => {
+function ChartStyle({ id, config }: ChartStyleProps) {
   const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color)
 
   if (!colorConfig.length) {
@@ -61,6 +65,7 @@ const ChartStyle = ({ id, config }: ChartStyleProps) => {
 
   return (
     <style
+      // biome-ignore lint/security/noDangerouslySetInnerHtml: controlled CSS injection for chart color themes
       dangerouslySetInnerHTML={{
         __html: Object.entries(THEMES)
           .map(
@@ -80,10 +85,11 @@ ${colorConfig
     />
   )
 }
+ChartStyle.displayName = 'ChartStyle'
 
 const ChartTooltip = RechartsPrimitive.Tooltip
 
-const ChartTooltipContent = ({
+function ChartTooltipContent({
   active,
   payload,
   className,
@@ -98,7 +104,7 @@ const ChartTooltipContent = ({
   color,
   nameKey,
   labelKey,
-}: ChartTooltipContentProps) => {
+}: ChartTooltipContentProps) {
   const { config } = useChart()
 
   const tooltipLabel = React.useMemo(() => {
@@ -208,17 +214,19 @@ const ChartTooltipContent = ({
     </div>
   )
 }
+ChartTooltipContent.displayName = 'ChartTooltipContent'
 
 const ChartLegend = RechartsPrimitive.Legend
+ChartLegend.displayName = 'ChartLegend'
 
-const ChartLegendContent = ({
+function ChartLegendContent({
   className,
   hideIcon = false,
   payload,
   verticalAlign = 'bottom',
   ref,
   nameKey,
-}: ChartLegendContentProps) => {
+}: ChartLegendContentProps) {
   const { config } = useChart()
 
   if (!payload?.length) {
@@ -256,5 +264,6 @@ const ChartLegendContent = ({
     </div>
   )
 }
+ChartLegendContent.displayName = 'ChartLegendContent'
 
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle }

package/src/checkbox/checkbox.tsx

@@ -37,6 +37,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       onCheckedChange?.(next)
     }
 
+    // biome-ignore lint/correctness/useExhaustiveDependencies: changeCheckedState is stable and defined in render scope
     React.useEffect(() => {
       if (ref && typeof ref !== 'function' && checked === 'indeterminate' && ref.current) {
         ref.current.indeterminate = true

package/src/collapsible/collapsible.tsx

@@ -44,6 +44,7 @@ const Collapsible = React.forwardRef<
     onOpenChange?.(state)
   }
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: handleOpenChange and triggerRef are stable refs
   React.useEffect(() => {
     if (open) {
       handleOpenChange(open)
@@ -56,7 +57,7 @@ const Collapsible = React.forwardRef<
 
     triggerRef.current?.addEventListener('click', handleClick)
     return () => triggerRef.current?.removeEventListener('click', handleClick)
-  }, [open])
+  }, [open, onOpenChange])
 
   return (
     <CollapsibleContext.Provider