@gentleduck/registry-ui 0.2.11 → 0.3.0

package/.turbo/turbo-test.log

@@ -1,23 +1,41 @@
 $ bun test
-bun test v1.3.5 (1e86cebd)
+bun test v1.3.10 (30e609e0)
+
+::group::src/pagination/__test__/pagination.test.tsx:
+(pass) registry-ui pagination > PaginationWrapper prefers provided button icons over the default chevrons [17.00ms]
+(pass) registry-ui pagination > PaginationWrapper still renders default chevrons when icons are not provided [3.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 [1.00ms]
+
+::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 [9.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 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 > 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 [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
 
 ::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. [403.00ms]

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @gentleduck/registry-ui
 
+## 0.3.0
+
+### Minor Changes
+
+- 3ee8b3a: feat: add AI documentation chat and command menu enhancements
+
+  @gentleduck/docs:
+
+  - Add useAIChat hook for streaming AI chat with rAF-batched updates
+  - Add AIChatPanel component with markdown rendering, shiki syntax highlighting, and dynamic props
+  - Add AI toggle mode to CommandMenu with auto-switch on empty search results
+  - Add react-markdown and shiki as optional peer dependencies
+
+  @gentleduck/registry-ui:
+
+  - Add hideClose prop to DialogContent to conditionally hide the close button
+  - Add children prop to CommandInput for rendering extra elements in the input wrapper
+  - Add contentClassName prop to CommandDialog for dynamic dialog sizing
+
+## 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.3.0"
 }

package/src/accordion/accordion.tsx

@@ -244,4 +244,4 @@ const AccordionContent = React.forwardRef<HTMLDivElement, React.HTMLProps<HTMLDi
 )
 AccordionContent.displayName = 'AccordionContent'
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }

package/src/alert/alert.tsx

@@ -49,4 +49,4 @@ const AlertDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<H
 )
 AlertDescription.displayName = 'AlertDescription'
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertDescription, AlertTitle }

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

@@ -101,14 +101,14 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
 
 export {
   AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
+  AlertDialogAction,
+  AlertDialogCancel,
   AlertDialogContent,
-  AlertDialogHeader,
+  AlertDialogDescription,
   AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  AlertDialogPortal,
   AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
+  AlertDialogTrigger,
 }

package/src/avatar/avatar.tsx

@@ -75,4 +75,4 @@ const AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(
 )
 AvatarGroup.displayName = 'AvatarGroup'
 
-export { Avatar, AvatarImage, AvatarFallback, AvatarGroup }
+export { Avatar, AvatarFallback, AvatarGroup, AvatarImage }

package/src/breadcrumb/breadcrumb.tsx

@@ -110,10 +110,10 @@ BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'
 
 export {
   Breadcrumb,
-  BreadcrumbList,
+  BreadcrumbEllipsis,
   BreadcrumbItem,
   BreadcrumbLink,
+  BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-  BreadcrumbEllipsis,
 }

package/src/button/button.tsx

@@ -76,4 +76,4 @@ function AnimationIcon({ children, animationIcon }: AnimationIconProps): React.J
 }
 AnimationIcon.displayName = 'AnimationIcon'
 
-export { Button, AnimationIcon }
+export { AnimationIcon, Button }

package/src/card/card.tsx

@@ -78,4 +78,4 @@ const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
 )
 CardFooter.displayName = 'CardFooter'
 
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent }
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }

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,12 +201,12 @@ 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>
   )
 })
 CarouselNext.displayName = 'CarouselNext'
 
-export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext }
+export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious }

package/src/chart/chart.tsx

@@ -266,4 +266,4 @@ function ChartLegendContent({
 }
 ChartLegendContent.displayName = 'ChartLegendContent'
 
-export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle }
+export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent }

package/src/collapsible/collapsible.tsx

@@ -149,4 +149,4 @@ const CollapsibleContent = React.forwardRef<
 })
 CollapsibleContent.displayName = 'CollapsibleContent'
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleContent, CollapsibleTrigger }

package/src/combobox/combobox.tsx

@@ -122,6 +122,7 @@ const ComboxGroup = React.forwardRef<
   )
 })
 ComboxGroup.displayName = 'ComboxGroup'
+
 export { ComboxGroup }
 
 type ComboboxItemProps<T extends ComboboxItemType> = Omit<

package/src/command/command.tsx

@@ -29,8 +29,9 @@ const CommandInput = React.forwardRef<
   React.ComponentRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> & {
     wrapperClassName?: string
+    children?: React.ReactNode
   }
->(({ className, wrapperClassName, placeholder = 'Search...', autoFocus = false, ...props }, ref) => (
+>(({ className, wrapperClassName, placeholder = 'Search...', autoFocus = false, children, ...props }, ref) => (
   <div className={cn('mb-2 flex items-center gap-2 border-b px-1', wrapperClassName)} data-slot="command-input">
     <Search aria-hidden="true" className="size-5 shrink-0 opacity-50" />
     <CommandPrimitive.Input
@@ -44,6 +45,7 @@ const CommandInput = React.forwardRef<
       // tabIndex={0}
       {...props}
     />
+    {children}
   </div>
 ))
 CommandInput.displayName = CommandPrimitive.Input.displayName
@@ -161,11 +163,14 @@ CommandShortcut.displayName = 'CommandShortcut'
 function CommandDialog({
   children,
   shouldFilter,
+  contentClassName,
   ...props
-}: React.ComponentPropsWithoutRef<typeof Dialog> & { shouldFilter?: boolean }) {
+}: React.ComponentPropsWithoutRef<typeof Dialog> & { shouldFilter?: boolean; contentClassName?: string }) {
   return (
     <Dialog {...props}>
-      <DialogContent className="h-125 max-w-full p-0 lg:w-[700px]">
+      <DialogContent
+        className={cn('h-125 max-w-full p-0 transition-all duration-200 lg:w-[700px]', contentClassName)}
+        hideClose>
         <DialogTitle className="sr-only">Command palette</DialogTitle>
         <DialogDescription className="sr-only">Search for commands and navigation items</DialogDescription>
         <Command className="max-w-full" shouldFilter={shouldFilter}>
@@ -183,13 +188,13 @@ function useCommandListContext(__scopeCommand: Parameters<typeof CommandPrimitiv
 
 export {
   Command,
-  CommandInput,
-  CommandList,
+  CommandDialog,
+  CommandEmpty,
   CommandGroup,
+  CommandInput,
   CommandItem,
-  CommandEmpty,
-  CommandShortcut,
+  CommandList,
   CommandSeparator,
-  CommandDialog,
+  CommandShortcut,
   useCommandListContext,
 }

package/src/context-menu/context-menu.tsx

@@ -169,18 +169,18 @@ ContextMenuShortcut.displayName = 'ContextMenuShortcut'
 
 export {
   ContextMenu,
-  ContextMenuTrigger,
+  ContextMenuCheckboxItem,
   ContextMenuContent,
+  ContextMenuGroup,
   ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
   ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
   ContextMenuSeparator,
   ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
   ContextMenuSub,
   ContextMenuSubContent,
   ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
+  ContextMenuTrigger,
 }

package/src/dialog/dialog-responsive.tsx

@@ -137,12 +137,12 @@ DialogDescriptionResponsive.displayName = 'DialogDescriptionResponsive'
 DialogCloseResponsive.displayName = 'DialogCloseResponsive'
 
 export {
-  DialogResponsive,
-  DialogTriggerResponsive,
+  DialogCloseResponsive,
   DialogContentResponsive,
-  DialogHeaderResponsive,
+  DialogDescriptionResponsive,
   DialogFooterResponsive,
+  DialogHeaderResponsive,
+  DialogResponsive,
   DialogTitleResponsive,
-  DialogDescriptionResponsive,
-  DialogCloseResponsive,
+  DialogTriggerResponsive,
 }

package/src/dialog/dialog.tsx

@@ -35,8 +35,8 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
   React.ComponentRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { closeText?: string }
->(({ className, children, closeText = 'Close', ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { closeText?: string; hideClose?: boolean }
+>(({ className, children, closeText = 'Close', hideClose = false, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -48,10 +48,12 @@ const DialogContent = React.forwardRef<
       )}
       {...props}>
       {children}
-      <DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X aria-hidden="true" className="h-4 w-4" />
-        <span className="sr-only">{closeText}</span>
-      </DialogPrimitive.Close>
+      {!hideClose && (
+        <DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <X aria-hidden="true" className="h-4 w-4" />
+          <span className="sr-only">{closeText}</span>
+        </DialogPrimitive.Close>
+      )}
     </DialogPrimitive.Content>
   </DialogPortal>
 ))
@@ -93,13 +95,13 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
   Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
   DialogClose,
   DialogContent,
-  DialogHeader,
+  DialogDescription,
   DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
   DialogTitle,
-  DialogDescription,
+  DialogTrigger,
 }

package/src/direction/direction.tsx

@@ -9,5 +9,6 @@ import {
   Provider,
   useDirection,
 } from '@gentleduck/primitives/direction'
+
 export type { Direction, DirectionProviderProps }
-export { useDirection, Provider, DirectionProvider, DirectionContext, DIRECTION_DICTIONARY }
+export { DIRECTION_DICTIONARY, DirectionContext, DirectionProvider, Provider, useDirection }

package/src/drawer/drawer.tsx

@@ -173,13 +173,13 @@ DrawerDescription.displayName = 'DrawerDescription'
 
 export {
   Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
   DrawerClose,
   DrawerContent,
-  DrawerHeader,
+  DrawerDescription,
   DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
   DrawerTitle,
-  DrawerDescription,
+  DrawerTrigger,
 }

package/src/dropdown-menu/dropdown-menu.tsx

@@ -172,18 +172,18 @@ DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
 
 export {
   DropdownMenu,
-  DropdownMenuTrigger,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
   DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
+  DropdownMenuTrigger,
 }

package/src/empty/empty.tsx

@@ -83,4 +83,4 @@ const EmptyContent = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'
 })
 EmptyContent.displayName = 'EmptyContent'
 
-export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia }
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle }

package/src/field/field.tsx

@@ -220,13 +220,13 @@ FieldError.displayName = 'FieldError'
 
 export {
   Field,
-  FieldLabel,
+  FieldContent,
   FieldDescription,
   FieldError,
   FieldGroup,
+  FieldLabel,
   FieldLegend,
   FieldSeparator,
   FieldSet,
-  FieldContent,
   FieldTitle,
 }

package/src/hover-card/hover-card.tsx

@@ -76,4 +76,4 @@ const HoverCardContent = React.forwardRef<
 })
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
 
-export { HoverCard, HoverCardTrigger, HoverCardContent }
+export { HoverCard, HoverCardContent, HoverCardTrigger }

package/src/input-group/input-group.tsx

@@ -170,4 +170,4 @@ const InputGroupTextarea = React.forwardRef<HTMLTextAreaElement, React.Component
 )
 InputGroupTextarea.displayName = 'InputGroupTextarea'
 
-export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea }
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea }

package/src/input-otp/input-otp.tsx

@@ -63,4 +63,4 @@ InputOTPSeparator.displayName = 'InputOTPSeparator'
 const REGEXP_ONLY_DIGITS_AND_CHARS = InputOTPPrimitive.REGEXP_ONLY_DIGITS_AND_CHARS
 const REGEXP_ONLY_DIGITS = InputOTPPrimitive.REGEXP_ONLY_DIGITS
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator, REGEXP_ONLY_DIGITS_AND_CHARS, REGEXP_ONLY_DIGITS }
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, REGEXP_ONLY_DIGITS, REGEXP_ONLY_DIGITS_AND_CHARS }

package/src/item/item.tsx

@@ -174,13 +174,13 @@ ItemFooter.displayName = 'ItemFooter'
 
 export {
   Item,
-  ItemMedia,
-  ItemContent,
   ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
   ItemGroup,
+  ItemHeader,
+  ItemMedia,
   ItemSeparator,
   ItemTitle,
-  ItemDescription,
-  ItemHeader,
-  ItemFooter,
 }

package/src/menubar/menubar.tsx

@@ -202,19 +202,19 @@ MenubarShortcut.displayName = 'MenubarShortcut'
 
 export {
   Menubar,
-  MenubarMenu,
-  MenubarTrigger,
+  MenubarCheckboxItem,
   MenubarContent,
+  MenubarGroup,
   MenubarItem,
-  MenubarSeparator,
   MenubarLabel,
-  MenubarCheckboxItem,
+  MenubarMenu,
+  MenubarPortal,
   MenubarRadioGroup,
   MenubarRadioItem,
-  MenubarPortal,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
   MenubarSubContent,
   MenubarSubTrigger,
-  MenubarGroup,
-  MenubarSub,
-  MenubarShortcut,
+  MenubarTrigger,
 }

package/src/navigation-menu/navigation-menu.tsx

@@ -141,12 +141,12 @@ NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayN
 
 export {
   NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
   NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
   NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
   NavigationMenuViewport,
   navigationMenuTriggerStyle,
 }

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

@@ -36,4 +36,4 @@ PopoverContent.displayName = PopoverPrimitive.Content.displayName
 export const PopoverClose: typeof PopoverPrimitive.Close = PopoverPrimitive.Close
 PopoverClose.displayName = 'PopoverClose'
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }

package/src/resizable/resizable.tsx

@@ -51,4 +51,4 @@ const ResizableHandle = React.forwardRef<
 ))
 ResizableHandle.displayName = 'ResizableHandle'
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup }

package/src/select/select.tsx

@@ -131,13 +131,13 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName
 
 export {
   Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
   SelectContent,
-  SelectLabel,
+  SelectGroup,
   SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
+  SelectLabel,
   SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
 }

package/src/sheet/sheet.tsx

@@ -92,13 +92,13 @@ SheetDescription.displayName = SheetPrimitive.Description.displayName
 
 export {
   Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
   SheetClose,
   SheetContent,
-  SheetHeader,
+  SheetDescription,
   SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
   SheetTitle,
-  SheetDescription,
+  SheetTrigger,
 }

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>
   )

package/src/table/table.tsx

@@ -92,4 +92,4 @@ const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttribu
 )
 TableCaption.displayName = 'TableCaption'
 
-export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption }
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow }

package/src/tabs/tabs.tsx

@@ -148,4 +148,4 @@ const TabsContent = React.forwardRef<
 })
 TabsContent.displayName = 'TabsContent'
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsContent, TabsList, TabsTrigger }

package/src/tooltip/tooltip.tsx

@@ -32,4 +32,4 @@ const TooltipContent = React.forwardRef<
 ))
 TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }