@gentleduck/registry-ui 0.2.11 → 0.2.12

package/.turbo/turbo-test.log

@@ -1,23 +1,41 @@
 $ bun test
 bun test v1.3.5 (1e86cebd)
 
+::group::src/pagination/__test__/pagination.test.tsx:
+(pass) registry-ui pagination > PaginationWrapper prefers provided button icons over the default chevrons [18.00ms]
+(pass) registry-ui pagination > PaginationWrapper still renders default chevrons when icons are not provided [4.00ms]
+
+::endgroup::
+
+::group::src/sidebar/__test__/sidebar.test.tsx:
+(pass) registry-ui sidebar > SidebarTrigger prefers a provided icon over the default panel icon [1.00ms]
+(pass) registry-ui sidebar > SidebarTrigger still renders the default panel icon when no icon is provided
+
+::endgroup::
+
 ::group::src/chart/__test__/chart.test.tsx:
-(pass) registry-ui chart > ChartContainer server render does not emit invalid size warnings [25.00ms]
+(pass) registry-ui chart > ChartContainer server render does not emit invalid size warnings [11.00ms]
+
+::endgroup::
+
+::group::src/carousel/__test__/carousel.test.tsx:
+(pass) registry-ui carousel > CarouselPrevious prefers a provided icon over the default arrow icon [2.00ms]
+(pass) registry-ui carousel > CarouselNext still renders the default arrow icon when no icon is provided [1.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 returns the shared base styles and defaults
 (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 renders loading state as a busy disabled native button [1.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 [1.00ms]
 (pass) registry-ui button > AnimationIcon renders left and right placements around children
 
 ::endgroup::
 
- 8 pass
+ 14 pass
  0 fail
- 25 expect() calls
-Ran 8 tests across 2 files. [368.00ms]
+ 43 expect() calls
+Ran 14 tests across 5 files. [439.00ms]

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gentleduck/registry-ui
 
+## 0.2.12
+
+### Patch Changes
+
+- 0fd319f: Update carousel, pagination, and sidebar components with tests and fixes.
+
 ## 0.2.11
 
 ### Patch Changes

package/package.json

@@ -56,5 +56,5 @@
     "test": "bun test"
   },
   "type": "module",
-  "version": "0.2.11"
+  "version": "0.2.12"
 }

package/src/carousel/__test__/carousel.test.tsx

@@ -0,0 +1,27 @@
+import { describe, expect, test } from 'bun:test'
+import * as React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { Carousel, CarouselNext, CarouselPrevious } from '../carousel'
+
+describe('registry-ui carousel', () => {
+  test('CarouselPrevious prefers a provided icon over the default arrow icon', () => {
+    const html = renderToStaticMarkup(
+      <Carousel>
+        <CarouselPrevious icon={<span data-icon="custom-prev">P</span>} />
+      </Carousel>,
+    )
+
+    expect(html).toContain('data-icon="custom-prev"')
+    expect(html).not.toContain('lucide-arrow-left')
+  })
+
+  test('CarouselNext still renders the default arrow icon when no icon is provided', () => {
+    const html = renderToStaticMarkup(
+      <Carousel>
+        <CarouselNext />
+      </Carousel>,
+    )
+
+    expect(html).toContain('lucide-arrow-right')
+  })
+})

package/src/carousel/carousel.tsx

@@ -154,7 +154,7 @@ CarouselItem.displayName = 'CarouselItem'
 const CarouselPrevious = React.forwardRef<
   React.ComponentRef<typeof Button>,
   React.ComponentPropsWithoutRef<typeof Button> & { text?: string }
->(({ className, variant = 'outline', size = 'icon', text = 'Previous slide', ...props }, ref) => {
+>(({ className, icon, variant = 'outline', size = 'icon', text = 'Previous slide', ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
   return (
@@ -172,8 +172,8 @@ const CarouselPrevious = React.forwardRef<
       ref={ref}
       size={size}
       variant={variant}
+      icon={icon === undefined ? <ArrowLeft aria-hidden="true" className="h-4 w-4 rtl:rotate-180" /> : icon}
       {...props}>
-      <ArrowLeft aria-hidden="true" className="h-4 w-4 rtl:rotate-180" />
       <span className="sr-only">{text}</span>
     </Button>
   )
@@ -183,7 +183,7 @@ CarouselPrevious.displayName = 'CarouselPrevious'
 const CarouselNext = React.forwardRef<
   React.ComponentRef<typeof Button>,
   React.ComponentPropsWithoutRef<typeof Button> & { text?: string }
->(({ className, variant = 'outline', size = 'icon', text = 'Next slide', ...props }, ref) => {
+>(({ className, icon, variant = 'outline', size = 'icon', text = 'Next slide', ...props }, ref) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel()
 
   return (
@@ -201,8 +201,8 @@ const CarouselNext = React.forwardRef<
       ref={ref}
       size={size}
       variant={variant}
+      icon={icon === undefined ? <ArrowRight aria-hidden="true" className="h-4 w-4 rtl:rotate-180" /> : icon}
       {...props}>
-      <ArrowRight aria-hidden="true" className="h-4 w-4 rtl:rotate-180" />
       <span className="sr-only">{text}</span>
     </Button>
   )

package/src/pagination/__test__/pagination.test.tsx

@@ -0,0 +1,35 @@
+import { describe, expect, test } from 'bun:test'
+import * as React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { PaginationWrapper } from '../pagination'
+
+describe('registry-ui pagination', () => {
+  test('PaginationWrapper prefers provided button icons over the default chevrons', () => {
+    const html = renderToStaticMarkup(
+      <PaginationWrapper
+        left={{ icon: <span data-icon="left">L</span> }}
+        maxLeft={{ icon: <span data-icon="max-left">ML</span> }}
+        right={{ icon: <span data-icon="right">R</span> }}
+        maxRight={{ icon: <span data-icon="max-right">MR</span> }}
+      />,
+    )
+
+    expect(html).toContain('data-icon="left"')
+    expect(html).toContain('data-icon="max-left"')
+    expect(html).toContain('data-icon="right"')
+    expect(html).toContain('data-icon="max-right"')
+    expect(html).not.toContain('lucide-chevron-left')
+    expect(html).not.toContain('lucide-chevron-right')
+    expect(html).not.toContain('lucide-chevrons-left')
+    expect(html).not.toContain('lucide-chevrons-right')
+  })
+
+  test('PaginationWrapper still renders default chevrons when icons are not provided', () => {
+    const html = renderToStaticMarkup(<PaginationWrapper />)
+
+    expect(html).toContain('lucide-chevron-left')
+    expect(html).toContain('lucide-chevron-right')
+    expect(html).toContain('lucide-chevrons-left')
+    expect(html).toContain('lucide-chevrons-right')
+  })
+})

package/src/pagination/pagination.tsx

@@ -121,10 +121,10 @@ const PaginationWrapper = (props: DuckPaginationProps) => {
   const { className: wrapperClassName, dir, ...wrapperProps } = props.wrapper ?? {}
   const { className: contentClassName, ...contentProps } = props.content ?? {}
   const { className: itemClassName, ...itemProps } = props.item ?? {}
-  const { className: rightClassName, ...rightProps } = props.right ?? {}
-  const { className: maxRightClassName, ...maxRightProps } = props.maxRight ?? {}
-  const { className: leftClassName, ...leftProps } = props.left ?? {}
-  const { className: maxLeftClassName, ...maxLeftProps } = props.maxLeft ?? {}
+  const { className: rightClassName, icon: rightIcon, ...rightProps } = props.right ?? {}
+  const { className: maxRightClassName, icon: maxRightIcon, ...maxRightProps } = props.maxRight ?? {}
+  const { className: leftClassName, icon: leftIcon, ...leftProps } = props.left ?? {}
+  const { className: maxLeftClassName, icon: maxLeftIcon, ...maxLeftProps } = props.maxLeft ?? {}
   const direction = useDirection(dir as Direction)
   const StartIcon = direction === 'rtl' ? ChevronRightIcon : ChevronLeftIcon
   const EndIcon = direction === 'rtl' ? ChevronLeftIcon : ChevronRightIcon
@@ -138,41 +138,41 @@ const PaginationWrapper = (props: DuckPaginationProps) => {
           <Button
             aria-label="Go to first page"
             className={cn('w-[32px] p-0', maxLeftClassName)}
+            icon={maxLeftIcon === undefined ? <StartDoubleIcon aria-hidden="true" /> : maxLeftIcon}
             size="sm"
             variant="outline"
-            {...maxLeftProps}>
-            <StartDoubleIcon aria-hidden="true" />
-          </Button>
+            {...maxLeftProps}
+          />
         </PaginationItem>
         <PaginationItem className={cn(itemClassName)} {...itemProps}>
           <Button
             aria-label="Go to previous page"
             className={cn('w-[32px] p-0', leftClassName)}
+            icon={leftIcon === undefined ? <StartIcon aria-hidden="true" /> : leftIcon}
             size="sm"
             variant="outline"
-            {...leftProps}>
-            <StartIcon aria-hidden="true" />
-          </Button>
+            {...leftProps}
+          />
         </PaginationItem>
         <PaginationItem className={cn(itemClassName)} {...itemProps}>
           <Button
             aria-label="Go to next page"
             className={cn('w-[32px] p-0', rightClassName)}
+            icon={rightIcon === undefined ? <EndIcon aria-hidden="true" /> : rightIcon}
             size="sm"
             variant="outline"
-            {...rightProps}>
-            <EndIcon aria-hidden="true" />
-          </Button>
+            {...rightProps}
+          />
         </PaginationItem>
         <PaginationItem className={cn(itemClassName)} {...itemProps}>
           <Button
             aria-label="Go to last page"
             className={cn('w-[32px] p-0', maxRightClassName)}
+            icon={maxRightIcon === undefined ? <EndDoubleIcon aria-hidden="true" /> : maxRightIcon}
             size="sm"
             variant="outline"
-            {...maxRightProps}>
-            <EndDoubleIcon aria-hidden="true" />
-          </Button>
+            {...maxRightProps}
+          />
         </PaginationItem>
       </PaginationContent>
     </Pagination>

package/src/sidebar/__test__/sidebar.test.tsx

@@ -0,0 +1,39 @@
+import { describe, expect, test } from 'bun:test'
+import * as React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { SidebarTrigger } from '../sidebar'
+import { SidebarContext } from '../sidebar.hooks'
+
+const sidebarContextValue = {
+  state: 'expanded' as const,
+  open: true,
+  setOpen: () => {},
+  openMobile: false,
+  setOpenMobile: () => {},
+  isMobile: false,
+  toggleSidebar: () => {},
+  dir: 'ltr' as const,
+}
+
+describe('registry-ui sidebar', () => {
+  test('SidebarTrigger prefers a provided icon over the default panel icon', () => {
+    const html = renderToStaticMarkup(
+      <SidebarContext.Provider value={sidebarContextValue}>
+        <SidebarTrigger icon={<span data-icon="custom">C</span>} />
+      </SidebarContext.Provider>,
+    )
+
+    expect(html).toContain('data-icon="custom"')
+    expect(html).not.toContain('lucide-panel-left')
+  })
+
+  test('SidebarTrigger still renders the default panel icon when no icon is provided', () => {
+    const html = renderToStaticMarkup(
+      <SidebarContext.Provider value={sidebarContextValue}>
+        <SidebarTrigger />
+      </SidebarContext.Provider>,
+    )
+
+    expect(html).toContain('lucide-panel-left')
+  })
+})

package/src/sidebar/sidebar.tsx

@@ -220,7 +220,7 @@ Sidebar.displayName = 'Sidebar'
 const SidebarTrigger = React.forwardRef<
   React.ComponentRef<typeof Button>,
   React.ComponentPropsWithoutRef<typeof Button> & { text?: string }
->(({ className, onClick, text = 'Toggle Sidebar', ...props }, ref) => {
+>(({ className, icon, onClick, text = 'Toggle Sidebar', ...props }, ref) => {
   const { toggleSidebar } = useSidebar()
   const direction = useDirection()
 
@@ -232,13 +232,13 @@ const SidebarTrigger = React.forwardRef<
       variant="ghost"
       size="icon-sm"
       dir={direction}
+      icon={icon === undefined ? <PanelLeftIcon aria-hidden="true" className="rtl:-scale-x-100" /> : icon}
       className={cn(className)}
       onClick={(event) => {
         onClick?.(event)
         toggleSidebar()
       }}
       {...props}>
-      <PanelLeftIcon aria-hidden="true" className="rtl:-scale-x-100" />
       <span className="sr-only">{text}</span>
     </Button>
   )