@gentleduck/registry-ui 0.2.1

package/src/menubar/menubar.tsx

@@ -0,0 +1,213 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import { AnimVariants } from '@gentleduck/motion/anim'
+import * as MenubarPrimitive from '@gentleduck/primitives/menubar'
+import { Check, ChevronRight, Circle } from 'lucide-react'
+import * as React from 'react'
+
+const MenubarMenu: typeof MenubarPrimitive.Menu = MenubarPrimitive.Menu
+
+const MenubarGroup = MenubarPrimitive.Group
+
+const MenubarPortal = MenubarPrimitive.Portal
+
+function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return <MenubarPrimitive.RadioGroup {...props} />
+}
+
+function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+const Menubar = React.forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn('flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm', className)}
+    {...props}
+  />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarTrigger = React.forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-3 py-1 font-medium text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      className,
+    )}
+    {...props}
+  />
+))
+
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'ps-8',
+      className,
+    )}
+    {...props}>
+    {children}
+    <ChevronRight aria-hidden="true" className="ms-auto h-4 w-4 rtl:rotate-180" />
+  </MenubarPrimitive.SubTrigger>
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-(--gentleduck-menubar-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in',
+      AnimVariants(),
+      className,
+    )}
+    {...props}
+  />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+  <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Content
+      ref={ref}
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-48 origin-(--gentleduck-menubar-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in',
+        AnimVariants(),
+        className,
+      )}
+      {...props}
+    />
+  </MenubarPrimitive.Portal>
+))
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+      inset && 'ps-8',
+      className,
+    )}
+    {...props}
+  />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+      className,
+    )}
+    checked={checked}
+    {...props}>
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check aria-hidden="true" className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
+      className,
+    )}
+    {...props}>
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle aria-hidden="true" className="size-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 font-semibold text-sm', inset && 'ps-8', className)}
+    {...props}
+  />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef<
+  React.ComponentRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('ms-auto text-muted-foreground text-xs tracking-widest', className)} {...props} />
+}
+MenubarShortcut.displayName = 'MenubarShortcut'
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+}

package/src/navigation-menu/index.ts

@@ -0,0 +1 @@
+export * from './navigation-menu'

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

@@ -0,0 +1,152 @@
+import { cn } from '@gentleduck/libs/cn'
+import * as NavigationMenuPrimitive from '@gentleduck/primitives/navigation-menu'
+import { cva } from '@gentleduck/variants'
+import { ChevronDown } from 'lucide-react'
+import * as React from 'react'
+
+const NavigationMenu = React.forwardRef<
+  React.ComponentRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> & {
+    viewport?: boolean
+  }
+>(({ className, children, viewport = true, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className)}
+    data-slot="navigation-menu"
+    data-viewport={viewport}
+    {...props}>
+    {children}
+    {viewport && <NavigationMenuViewport />}
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ComponentRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn('group flex flex-1 list-none items-center justify-center gap-1', className)}
+    data-slot="navigation-menu-list"
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = React.forwardRef<
+  React.ComponentRef<typeof NavigationMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Item
+    ref={ref}
+    className={cn('relative', className)}
+    data-slot="navigation-menu-item"
+    {...props}
+  />
+))
+NavigationMenuItem.displayName = NavigationMenuPrimitive.Item.displayName
+
+const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 font-medium text-sm outline-none transition-all hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:hover:bg-accent',
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ComponentRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), 'group', className)}
+    data-slot="navigation-menu-trigger"
+    {...props}>
+    {children}
+    <ChevronDown
+      aria-hidden="true"
+      className="relative top-[1px] ms-1 size-4 transition duration-300 group-data-[state=open]:rotate-180"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ComponentRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      'data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 start-0 top-0 w-full p-2 pe-2.5 data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out **:data-[slot=navigation-menu-link]:focus:outline-none **:data-[slot=navigation-menu-link]:focus:ring-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in md:absolute md:w-auto',
+      'transition-all transition-discrete duration-[200ms,150ms] ease-(--duck-motion-ease)',
+      className,
+    )}
+    data-slot="navigation-menu-content"
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ComponentRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn('absolute start-0 top-full isolate flex justify-center')}>
+    <NavigationMenuPrimitive.Viewport
+      ref={ref}
+      className={cn(
+        'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full origin-top-center overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=closed]:animate-out data-[state=open]:animate-in md:w-(--radix-navigation-menu-viewport-width)',
+        'transition-all transition-discrete duration-[200ms,150ms] ease-(--duck-motion-ease)',
+        className,
+      )}
+      data-slot="navigation-menu-viewport"
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuLink = React.forwardRef<
+  React.ComponentRef<typeof NavigationMenuPrimitive.Link>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Link>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Link
+    ref={ref}
+    className={cn(
+      "flex flex-col gap-1 rounded-sm p-2 text-sm outline-none transition-all hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+      className,
+    )}
+    data-slot="navigation-menu-link"
+    {...props}
+  />
+))
+NavigationMenuLink.displayName = NavigationMenuPrimitive.Link.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ComponentRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      'data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=visible]:animate-in',
+      className,
+    )}
+    data-slot="navigation-menu-indicator"
+    {...props}>
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}

package/src/pagination/index.ts

@@ -0,0 +1,2 @@
+export * from './pagination'
+export * from './pagination.types'

package/src/pagination/pagination.tsx

@@ -0,0 +1,191 @@
+import { cn } from '@gentleduck/libs/cn'
+import { type Direction, useDirection } from '@gentleduck/primitives/direction'
+import * as PaginationPrimitive from '@gentleduck/primitives/pagination'
+import {
+  ChevronLeft,
+  ChevronLeftIcon,
+  ChevronRight,
+  ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+  MoreHorizontal,
+} from 'lucide-react'
+import * as React from 'react'
+import { Button, buttonVariants } from '../button'
+import type { DuckPaginationProps, PaginationLinkProps } from './pagination.types'
+
+const Pagination = React.forwardRef<
+  React.ComponentRef<typeof PaginationPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof PaginationPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <PaginationPrimitive.Root
+    className={cn('mx-auto flex w-full justify-center', className)}
+    data-slot="pagination"
+    ref={ref}
+    {...props}
+  />
+))
+Pagination.displayName = 'Pagination'
+
+const PaginationContent = React.forwardRef<
+  React.ComponentRef<typeof PaginationPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PaginationPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <PaginationPrimitive.Content
+    className={cn('flex flex-row items-center gap-1', className)}
+    data-slot="pagination-content"
+    ref={ref}
+    {...props}
+  />
+))
+PaginationContent.displayName = 'PaginationContent'
+
+const PaginationItem = React.forwardRef<
+  React.ComponentRef<typeof PaginationPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof PaginationPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <PaginationPrimitive.Item className={cn(className)} data-slot="pagination-item" ref={ref} {...props} />
+))
+PaginationItem.displayName = 'PaginationItem'
+
+const PaginationLink = React.forwardRef<HTMLAnchorElement, PaginationLinkProps>(
+  ({ className, isActive, size = 'icon', ...props }, ref) => (
+    <a
+      aria-current={isActive ? 'page' : undefined}
+      className={cn(
+        buttonVariants({
+          size,
+          variant: isActive ? 'outline' : 'ghost',
+        }),
+        className,
+      )}
+      data-slot="pagination-link"
+      ref={ref}
+      {...props}
+    />
+  ),
+)
+PaginationLink.displayName = 'PaginationLink'
+
+const PaginationPrevious = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<typeof PaginationLink> & { text?: string }
+>(({ className, text = 'Previous', ...props }, ref) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    className={cn('gap-1 ps-2.5', className)}
+    data-slot="pagination-previous"
+    ref={ref}
+    size="default"
+    {...props}>
+    <ChevronLeft aria-hidden="true" className="h-4 w-4 rtl:rotate-180" />
+    <span className="hidden sm:block">{text}</span>
+  </PaginationLink>
+))
+PaginationPrevious.displayName = 'PaginationPrevious'
+
+const PaginationNext = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<typeof PaginationLink> & { text?: string }
+>(({ className, text = 'Next', ...props }, ref) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    className={cn('gap-1 pe-2.5', className)}
+    data-slot="pagination-next"
+    ref={ref}
+    size="default"
+    {...props}>
+    <span className="hidden sm:block">{text}</span>
+    <ChevronRight aria-hidden="true" className="h-4 w-4 rtl:rotate-180" />
+  </PaginationLink>
+))
+PaginationNext.displayName = 'PaginationNext'
+
+const PaginationEllipsis = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<'span'> & { text?: string }
+>(({ className, text = 'More pages', ...props }, ref) => (
+  <span
+    role="img"
+    aria-label={text}
+    className={cn('flex h-9 w-9 items-center justify-center', className)}
+    data-slot="pagination-ellipsis"
+    ref={ref}
+    {...props}>
+    <MoreHorizontal aria-hidden="true" className="h-4 w-4" />
+  </span>
+))
+PaginationEllipsis.displayName = 'PaginationEllipsis'
+
+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 direction = useDirection(dir as Direction)
+  const StartIcon = direction === 'rtl' ? ChevronRightIcon : ChevronLeftIcon
+  const EndIcon = direction === 'rtl' ? ChevronLeftIcon : ChevronRightIcon
+  const StartDoubleIcon = direction === 'rtl' ? ChevronsRightIcon : ChevronsLeftIcon
+  const EndDoubleIcon = direction === 'rtl' ? ChevronsLeftIcon : ChevronsRightIcon
+
+  return (
+    <Pagination className={cn('justify-end', wrapperClassName)} {...wrapperProps}>
+      <PaginationContent className={cn('gap-2', contentClassName)} {...contentProps}>
+        <PaginationItem className={cn(itemClassName)} {...itemProps}>
+          <Button
+            aria-label="Go to first page"
+            className={cn('w-[32px] p-0', maxLeftClassName)}
+            size="sm"
+            variant="outline"
+            {...maxLeftProps}>
+            <StartDoubleIcon aria-hidden="true" />
+          </Button>
+        </PaginationItem>
+        <PaginationItem className={cn(itemClassName)} {...itemProps}>
+          <Button
+            aria-label="Go to previous page"
+            className={cn('w-[32px] p-0', leftClassName)}
+            size="sm"
+            variant="outline"
+            {...leftProps}>
+            <StartIcon aria-hidden="true" />
+          </Button>
+        </PaginationItem>
+        <PaginationItem className={cn(itemClassName)} {...itemProps}>
+          <Button
+            aria-label="Go to next page"
+            className={cn('w-[32px] p-0', rightClassName)}
+            size="sm"
+            variant="outline"
+            {...rightProps}>
+            <EndIcon aria-hidden="true" />
+          </Button>
+        </PaginationItem>
+        <PaginationItem className={cn(itemClassName)} {...itemProps}>
+          <Button
+            aria-label="Go to last page"
+            className={cn('w-[32px] p-0', maxRightClassName)}
+            size="sm"
+            variant="outline"
+            {...maxRightProps}>
+            <EndDoubleIcon aria-hidden="true" />
+          </Button>
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  )
+}
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+  PaginationWrapper,
+}

package/src/pagination/pagination.types.ts

@@ -0,0 +1,17 @@
+import type { Button, ButtonProps } from '../button'
+import type { Pagination, PaginationContent, PaginationItem } from './pagination'
+
+export interface DuckPaginationProps {
+  wrapper?: React.ComponentPropsWithoutRef<typeof Pagination>
+  content?: React.ComponentPropsWithoutRef<typeof PaginationContent>
+  item?: React.ComponentPropsWithoutRef<typeof PaginationItem>
+  right?: React.ComponentPropsWithoutRef<typeof Button>
+  maxRight?: React.ComponentPropsWithoutRef<typeof Button>
+  left?: React.ComponentPropsWithoutRef<typeof Button>
+  maxLeft?: React.ComponentPropsWithoutRef<typeof Button>
+}
+
+export type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, 'size'> &
+  Omit<React.ComponentPropsWithoutRef<'a'>, 'size'>

package/src/popover/index.ts

@@ -0,0 +1 @@
+export * from './popover'

package/src/popover/popover.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { cn } from '@gentleduck/libs/cn'
+import * as PopoverPrimitive from '@gentleduck/primitives/popover'
+import * as React from 'react'
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger: typeof PopoverPrimitive.Trigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor: typeof PopoverPrimitive.Anchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ComponentRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--gentleduck-popover-content-transform-origin) rounded-md border bg-popover p-4 text-start text-popover-foreground shadow-md outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
+        'transition-all transition-discrete duration-[200ms,150ms] ease-(--duck-motion-ease)',
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export const PopoverClose: typeof PopoverPrimitive.Close = PopoverPrimitive.Close
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

package/src/preview-panel/index.ts

@@ -0,0 +1,3 @@
+export * from './preview-panel'
+export * from './preview-panel.types'
+export * from './preview-panel-dialog'