@gentleduck/registry-ui 0.2.5 → 0.2.8

package/.turbo/turbo-check-types.log

@@ -0,0 +1 @@
+$ tsc -p tsconfig.json --noEmit --pretty false --skipLibCheck

package/.turbo/turbo-test.log

@@ -0,0 +1,23 @@
+$ 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 [53.00ms]
+
+::endgroup::
+
+::group::src/button/__test__/button.test.tsx:
+(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 [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::
+
+ 8 pass
+ 0 fail
+ 25 expect() calls
+Ran 8 tests across 2 files. [574.00ms]

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @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
+
+- 2b6e8d0: Resolve all biome lint warnings, improve type safety, and add test coverage across the monorepo.
+- Updated dependencies [2b6e8d0]
+  - @gentleduck/primitives@0.2.5
+  - @gentleduck/variants@0.1.20
+  - @gentleduck/hooks@0.1.12
+  - @gentleduck/motion@0.1.17
+  - @gentleduck/libs@0.1.15
+  - @gentleduck/vim@0.1.16
+
 ## 0.2.5
 
 ### 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",
@@ -52,8 +52,9 @@
     "access": "public"
   },
   "scripts": {
-    "check-types": "tsc -p tsconfig.json --noEmit --pretty false --skipLibCheck"
+    "check-types": "tsc -p tsconfig.json --noEmit --pretty false --skipLibCheck",
+    "test": "bun test"
   },
   "type": "module",
-  "version": "0.2.5"
+  "version": "0.2.8"
 }

package/src/_old/_table/index.ts

@@ -1,5 +1,14 @@
+/**
+ * @deprecated These table components are deprecated and no longer maintained.
+ * Use the components from `@duck-ui/registry-ui/table` instead.
+ * This module will be removed in a future release.
+ */
 export * from './table'
+/** @deprecated Use components from `@duck-ui/registry-ui/table` instead. */
 export * from './table.constants'
+/** @deprecated Use components from `@duck-ui/registry-ui/table` instead. */
 export * from './table.hook'
+/** @deprecated Use components from `@duck-ui/registry-ui/table` instead. */
 export * from './table.lib'
+/** @deprecated Use components from `@duck-ui/registry-ui/table` instead. */
 export * from './table.types'

package/src/_old/_table/table.tsx

@@ -206,7 +206,7 @@
 //   DuckTableSearchInputProps
 // >(({ trigger, label, badge, keys }, ref) => {
 //   const {
-//     children: badgeChildren = '⌃+⇧+F',
+//     children: badgeChildren = 'Ctrl+Shift+F',
 //     className: badgeClassName,
 //     ...badgeProps
 //   } = badge ?? {}
@@ -415,7 +415,7 @@
 //           children: 'View',
 //           command: {
 //             key: 'ctrl+shift+v',
-//             label: '⌃+⇧+V',
+//             label: 'Ctrl+Shift+V',
 //           },
 //           icon: {
 //             children: MixerHorizontalIcon as LucideIcon,
@@ -527,7 +527,7 @@
 //         //     }),
 //         // command: {
 //         //     key: 'ctrl+shift+down',
-//         //     label: '⌃+⇧+↓',
+//         //     label: 'Ctrl+Shift+Down',
 //         //     action: () =>
 //         //         setPaginationState({
 //         //             ...paginationState,
@@ -546,7 +546,7 @@
 //         // onClick: () => setPaginationState({ ...paginationState, activePage: 0 }),
 //         // command: {
 //         //     key: 'ctrl+shift+left',
-//         //     label: '⌃+⇧+←',
+//         //     label: 'Ctrl+Shift+Left',
 //         //     action: () => setPaginationState({ ...paginationState, activePage: 0 }),
 //         // },
 //         label: {
@@ -561,7 +561,7 @@
 //         // onClick: () => setPaginationState({ ...paginationState, activePage: resultArrays.length - 1 }),
 //         // command: {
 //         //     key: 'ctrl+shift+right',
-//         //     label: '⌃+⇧+->',
+//         //     label: 'Ctrl+Shift+Right',
 //         //     action: () => setPaginationState({ ...paginationState, activePage: resultArrays.length - 1 }),
 //         // },
 //         label: {
@@ -575,7 +575,7 @@
 //       right={{
 //         command: {
 //           key: 'ctrl+shift+up',
-//           label: '⌃+⇧+↑',
+//           label: 'Ctrl+Shift+Up',
 //           // action: () =>
 //           //     setPaginationState({
 //           //         ...paginationState,
@@ -677,7 +677,7 @@
 //                     className: 'w-[4.5rem] h-[32px] gap-0',
 //                     command: {
 //                       key: 'ctrl+shift+c',
-//                       label: '⌃+⇧+C',
+//                       label: 'Ctrl+Shift+C',
 //                     },
 //                     label: {
 //                       children: 'Rows per page',

package/src/_old/_upload/index.ts

@@ -1,9 +1,22 @@
+/**
+ * @deprecated These upload components are deprecated and no longer maintained.
+ * Use the components from `@duck-ui/registry-ui/upload` instead.
+ * This module will be removed in a future release.
+ */
 export * from './upload'
+/** @deprecated Use components from `@duck-ui/registry-ui/upload` instead. */
 export * from './upload.assets'
+/** @deprecated Use components from `@duck-ui/registry-ui/upload` instead. */
 export * from './upload.constants'
+/** @deprecated Use components from `@duck-ui/registry-ui/upload` instead. */
 export * from './upload.dto'
+/** @deprecated Use components from `@duck-ui/registry-ui/upload` instead. */
 export * from './upload.lib'
+/** @deprecated Use components from `@duck-ui/registry-ui/upload` instead. */
 export * from './upload.types'
+/** @deprecated Use components from `@duck-ui/registry-ui/upload` instead. */
 export * from './upload-advanced'
+/** @deprecated Use components from `@duck-ui/registry-ui/upload` instead. */
 export * from './upload-advanced-chunks'
+/** @deprecated Use components from `@duck-ui/registry-ui/upload` instead. */
 export * from './upload-sonner'

package/src/_old/_upload/upload-sonner.tsx

@@ -34,7 +34,7 @@
 //         </p>
 //         <div className="flex items-center gap-2">
 //           {remainingTime && (
-//             <p className="text-foreground-light text-sm font-mono">{`${remainingTime && !isNaN(remainingTime) && isFinite(remainingTime) && remainingTime !== 0 ? `${formatTime(remainingTime)} remaining – ` : ''}`}</p>
+//             <p className="text-foreground-light text-sm font-mono">{`${remainingTime && !isNaN(remainingTime) && isFinite(remainingTime) && remainingTime !== 0 ? `${formatTime(remainingTime)} remaining -` : ''}`}</p>
 //           )}
 //           <p className="text-foreground-light text-sm font-mono">{`${progress}%`}</p>
 //         </div>

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

@@ -337,7 +337,19 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
       setLoading,
       width,
     })
-  }, [blob])
+  }, [
+    blob,
+    barWidth,
+    currentColors.backgroundColor,
+    currentColors.barColor,
+    currentColors.barPlayedColor,
+    gap,
+    height,
+    minBarHeight,
+    process_audio,
+    setLoading,
+    width,
+  ])
 
   React.useEffect(() => {
     if (!canvasRef.current) return
@@ -359,7 +371,19 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
       gap,
       minBarHeight,
     })
-  }, [data, width, height, currentTime, duration, animationProgress, theme])
+  }, [
+    data,
+    width,
+    currentTime,
+    duration,
+    animationProgress,
+    barWidth,
+    currentColors.backgroundColor,
+    currentColors.barColor,
+    currentColors.barPlayedColor,
+    gap,
+    minBarHeight,
+  ])
 
   return (
     <canvas
@@ -374,4 +398,6 @@ const AudioVisualizer: React.FC<AudioVisualizerProps> = ({
   )
 }
 
+AudioVisualizer.displayName = 'AudioVisualizer'
+
 export { AudioVisualizer }

package/src/audio/audio.types.ts

@@ -6,8 +6,7 @@ export interface RecordingParams {
 
 export interface StopRecordingHandlerParam {
   setRecording: React.Dispatch<React.SetStateAction<boolean>>
-  // @ts-ignore
-  intervalRef: React.RefObject<NodeJS.Timeout | null>
+  intervalRef: React.RefObject<ReturnType<typeof setInterval> | null>
   mediaRecorderRef: React.RefObject<MediaRecorder | null>
   durationRef: React.RefObject<number>
 }

package/src/button/__test__/button.test.tsx

@@ -0,0 +1,80 @@
+import { describe, expect, test } from 'bun:test'
+import * as React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { AnimationIcon, Button } from '../button'
+import { buttonVariants } from '../button.constants'
+
+describe('registry-ui button', () => {
+  test('buttonVariants returns the shared base styles and defaults', () => {
+    const classes = buttonVariants()
+
+    expect(classes).toContain('inline-flex')
+    expect(classes).toContain('bg-primary')
+    expect(classes).toContain('h-9')
+  })
+
+  test('buttonVariants applies explicit variant and size overrides', () => {
+    const classes = buttonVariants({ size: 'sm', variant: 'ghost' })
+
+    expect(classes).toContain('h-8')
+    expect(classes).toContain('hover:bg-accent')
+  })
+
+  test('button exports keep stable display names', () => {
+    expect(Button).toBeDefined()
+    expect(Button.displayName).toBe('Button')
+    expect(AnimationIcon.displayName).toBe('AnimationIcon')
+  })
+
+  test('Button renders loading state as a busy disabled native button', () => {
+    const html = renderToStaticMarkup(<Button loading>Save</Button>)
+
+    expect(html).toContain('type="button"')
+    expect(html).toContain('aria-busy="true"')
+    expect(html).toContain('disabled=""')
+    expect(html).toContain('animate-spin')
+    expect(html).toContain('Save')
+  })
+
+  test('Button preserves explicit disabled state even when loading is false', () => {
+    const html = renderToStaticMarkup(
+      <Button disabled loading={false}>
+        Save
+      </Button>,
+    )
+
+    expect(html).toContain('disabled=""')
+    expect(html).not.toContain('aria-busy="true"')
+  })
+
+  test('Button collapses into icon-only mode and hides secondary content', () => {
+    const html = renderToStaticMarkup(
+      <Button icon={<span data-icon="left">L</span>} isCollapsed secondIcon={<span data-icon="right">R</span>}>
+        Save
+      </Button>,
+    )
+
+    expect(html).toContain('data-icon="left"')
+    expect(html).toContain('size-9')
+    expect(html).not.toContain('Save')
+    expect(html).not.toContain('data-icon="right"')
+  })
+
+  test('AnimationIcon renders left and right placements around children', () => {
+    const leftHtml = renderToStaticMarkup(
+      <AnimationIcon animationIcon={{ icon: <span data-icon="left">L</span>, iconPlacement: 'left' }}>
+        Label
+      </AnimationIcon>,
+    )
+    const rightHtml = renderToStaticMarkup(
+      <AnimationIcon animationIcon={{ icon: <span data-icon="right">R</span>, iconPlacement: 'right' }}>
+        Label
+      </AnimationIcon>,
+    )
+
+    expect(leftHtml).toContain('data-icon="left"')
+    expect(leftHtml.indexOf('data-icon="left"')).toBeLessThan(leftHtml.indexOf('Label'))
+    expect(rightHtml).toContain('data-icon="right"')
+    expect(rightHtml.indexOf('Label')).toBeLessThan(rightHtml.indexOf('data-icon="right"'))
+  })
+})

package/src/button/button.tsx

@@ -42,7 +42,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
             variant,
           }),
         )}
-        disabled={loading ?? disabled}
+        disabled={Boolean(loading) || disabled}
         ref={ref}
         type={type}>
         {loading ? <Loader aria-hidden="true" className="animate-spin" /> : icon}

package/src/button-group/button-group.tsx

@@ -12,6 +12,7 @@ const ButtonGroup = React.forwardRef<
 >(({ className, orientation = 'horizontal', dir, ...props }, ref) => {
   const direction = useDirection(dir as Direction)
   return (
+    // biome-ignore lint/a11y/useSemanticElements: group role is semantically correct for button groups
     <div
       className={cn(buttonGroupVariants({ orientation }), className)}
       data-orientation={orientation}