@gentleduck/registry-ui 0.2.6 → 0.2.8

package/.turbo/turbo-test.log

@@ -2,17 +2,17 @@ $ bun test
 bun test v1.3.5 (1e86cebd)
 
 ::group::src/chart/__test__/chart.test.tsx:
-(pass) registry-ui chart > ChartContainer server render does not emit invalid size warnings [47.00ms]
+(pass) registry-ui chart > ChartContainer server render does not emit invalid size warnings [53.00ms]
 
 ::endgroup::
 
 ::group::src/button/__test__/button.test.tsx:
-(pass) registry-ui button > buttonVariants returns the shared base styles and defaults
-(pass) registry-ui button > buttonVariants applies explicit variant and size overrides [1.00ms]
+(pass) registry-ui button > buttonVariants returns the shared base styles and defaults [1.00ms]
+(pass) registry-ui button > buttonVariants applies explicit variant and size overrides
 (pass) registry-ui button > button exports keep stable display names
-(pass) registry-ui button > Button renders loading state as a busy disabled native button [9.00ms]
-(pass) registry-ui button > Button preserves explicit disabled state even when loading is false
-(pass) registry-ui button > Button collapses into icon-only mode and hides secondary content [4.00ms]
+(pass) registry-ui button > Button renders loading state as a busy disabled native button [3.00ms]
+(pass) registry-ui button > Button preserves explicit disabled state even when loading is false [1.00ms]
+(pass) registry-ui button > Button collapses into icon-only mode and hides secondary content
 (pass) registry-ui button > AnimationIcon renders left and right placements around children [1.00ms]
 
 ::endgroup::
@@ -20,4 +20,4 @@ bun test v1.3.5 (1e86cebd)
  8 pass
  0 fail
  25 expect() calls
-Ran 8 tests across 2 files. [742.00ms]
+Ran 8 tests across 2 files. [574.00ms]

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @gentleduck/registry-ui
 
+## 0.2.8
+
+### Patch Changes
+
+- e7ee580: fix(registry-ui): replace workspace:\* dependencies with published npm versions
+
+  The published package had `workspace:*` references that broke any consumer's install.
+
 ## 0.2.6
 
 ### Patch Changes

package/package.json

@@ -4,12 +4,12 @@
     "node": ">=22.0.0"
   },
   "dependencies": {
-    "@gentleduck/hooks": "workspace:*",
-    "@gentleduck/libs": "workspace:*",
-    "@gentleduck/motion": "workspace:*",
-    "@gentleduck/primitives": "workspace:*",
-    "@gentleduck/variants": "workspace:*",
-    "@gentleduck/vim": "workspace:*",
+    "@gentleduck/hooks": "^0.1.12",
+    "@gentleduck/libs": "^0.1.15",
+    "@gentleduck/motion": "^0.1.17",
+    "@gentleduck/primitives": "^0.2.5",
+    "@gentleduck/variants": "^0.1.20",
+    "@gentleduck/vim": "^0.1.16",
     "embla-carousel-react": "8.6.0",
     "lucide-react": "0.576.0",
     "next-themes": "^0.4.6",
@@ -56,5 +56,5 @@
     "test": "bun test"
   },
   "type": "module",
-  "version": "0.2.6"
+  "version": "0.2.8"
 }

package/src/alert-dialog/alert-dialog.tsx

@@ -6,10 +6,13 @@ import * as React from 'react'
 import { buttonVariants } from '../button'
 
 const AlertDialog = AlertDialogPrimitive.Root
+AlertDialog.displayName = 'AlertDialog'
 
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+AlertDialogTrigger.displayName = 'AlertDialogTrigger'
 
 const AlertDialogPortal = AlertDialogPrimitive.Portal
+AlertDialogPortal.displayName = 'AlertDialogPortal'
 
 const AlertDialogOverlay = React.forwardRef<
   React.ComponentRef<typeof AlertDialogPrimitive.Overlay>,
@@ -46,13 +49,17 @@ const AlertDialogContent = React.forwardRef<
 ))
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 
-const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col space-y-2 text-center sm:text-start', className)} {...props} />
+const AlertDialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-2 text-center sm:text-start', className)} {...props} />
+  ),
 )
 AlertDialogHeader.displayName = 'AlertDialogHeader'
 
-const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-2', className)} {...props} />
+const AlertDialogFooter = 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} />
+  ),
 )
 AlertDialogFooter.displayName = 'AlertDialogFooter'
 

package/src/aspect-ratio/aspect-ratio.tsx

@@ -3,17 +3,14 @@
 import { cn } from '@gentleduck/libs/cn'
 import { type Direction, useDirection } from '@gentleduck/primitives/direction'
 import { Slot } from '@gentleduck/primitives/slot'
+import React from 'react'
 
-function AspectRatio({
-  style,
-  className,
-  ratio,
-  ref,
-  dir,
-  ...props
-}: React.ComponentPropsWithRef<typeof Slot> & {
-  ratio: string
-}) {
+const AspectRatio = React.forwardRef<
+  React.ComponentRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot> & {
+    ratio: string
+  }
+>(({ style, className, ratio, dir, ...props }, ref) => {
   const direction = useDirection(dir as Direction)
   return (
     <Slot
@@ -28,6 +25,7 @@ function AspectRatio({
       data-slot="aspect-ratio"
     />
   )
-}
+})
+AspectRatio.displayName = 'AspectRatio'
 
 export { AspectRatio }

package/src/audio/audio-visualizer.tsx

@@ -398,4 +398,6 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
   )
 }
 
+AudioVisualizer.displayName = 'AudioVisualizer'
+
 export { AudioVisualizer }

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/chart/chart.tsx

@@ -29,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)
@@ -54,8 +54,9 @@ const ChartContainer = ({ id, className, children, config, ref, dir, ...props }:
     </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) {
@@ -84,10 +85,11 @@ ${colorConfig
     />
   )
 }
+ChartStyle.displayName = 'ChartStyle'
 
 const ChartTooltip = RechartsPrimitive.Tooltip
 
-const ChartTooltipContent = ({
+function ChartTooltipContent({
   active,
   payload,
   className,
@@ -102,7 +104,7 @@ const ChartTooltipContent = ({
   color,
   nameKey,
   labelKey,
-}: ChartTooltipContentProps) => {
+}: ChartTooltipContentProps) {
   const { config } = useChart()
 
   const tooltipLabel = React.useMemo(() => {
@@ -212,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) {
@@ -260,5 +264,6 @@ const ChartLegendContent = ({
     </div>
   )
 }
+ChartLegendContent.displayName = 'ChartLegendContent'
 
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle }