@hina-ui/vue 1.3.0 → 1.4.0

package/src/components/lightbox/composables/useLightboxZoom.ts

@@ -1,4 +1,4 @@
-import { onBeforeUnmount, shallowRef } from 'vue'
+import { computed, onBeforeUnmount, shallowRef } from 'vue'
 import { animate } from 'motion-v'
 import { prefersReducedMotion, type TransitionName } from '../../../motion'
 import type { useLightboxMotion } from './useLightboxMotion'
@@ -6,6 +6,7 @@ import { FLING, TRACKPAD_INTENSITY } from '../utils/gesture'
 import {
   WHEEL_INTENSITY,
   ZOOM_MIN,
+  ZOOM_EPSILON,
   clampOffset,
   clampZoom,
   doubleTapZoom,
@@ -30,16 +31,28 @@ export interface PinchStart {
 
 export function useLightboxZoom(
   motion: ReturnType<typeof useLightboxMotion>,
-  geometry: () => { fit: Size; stage: Size; base: number },
+  geometry: () => {
+    fit: Size
+    frame: Size
+    stage: Size
+    base: number
+    original: number
+    secondary: number
+    max: number
+  },
 ) {
   const { x, y, scale } = motion
-  const zoomed = shallowRef(false)
+  const raw = shallowRef(scale.get())
   const unsubscribe = scale.on('change', value => {
-    zoomed.value = isZoomed(value / geometry().base)
+    raw.value = value
   })
   onBeforeUnmount(unsubscribe)
 
-  const zoom = () => scale.get() / geometry().base
+  const zoom = () => raw.value / geometry().base
+  const zoomed = computed(() => isZoomed(zoom()))
+  const canZoomIn = computed(() => zoom() < geometry().max - ZOOM_EPSILON)
+  const canToggle = computed(() => geometry().secondary > ZOOM_MIN + ZOOM_EPSILON)
+  const atOriginal = computed(() => Math.abs(zoom() - geometry().original) < ZOOM_EPSILON)
   const offset = (): Point => ({ x: x.get(), y: y.get() })
 
   function bounds(level = zoom()): Bounds {
@@ -57,7 +70,7 @@ export function useLightboxZoom(
   }
 
   function target(level: number, focal: Point): { level: number; offset: Point } {
-    const clamped = clampZoom(level)
+    const clamped = clampZoom(level, ZOOM_MIN, geometry().max)
     if (!isZoomed(clamped)) return { level: ZOOM_MIN, offset: { x: 0, y: 0 } }
     return {
       level: clamped,
@@ -74,7 +87,7 @@ export function useLightboxZoom(
   }
 
   function step(direction: 1 | -1) {
-    zoomTo(stepZoom(zoom(), direction), { x: 0, y: 0 })
+    zoomTo(stepZoom(zoom(), direction, geometry().max), { x: 0, y: 0 })
   }
 
   function reset() {
@@ -88,11 +101,11 @@ export function useLightboxZoom(
   }
 
   function doubleTap(focal: Point) {
-    zoomTo(doubleTapZoom(zoom()), focal)
+    zoomTo(doubleTapZoom(zoom(), geometry().secondary), focal)
   }
 
   function pinch(start: PinchStart, mid: Point, ratio: number) {
-    const level = elasticZoom(start.zoom * ratio)
+    const level = elasticZoom(start.zoom * ratio, ZOOM_MIN, geometry().max)
     const about = zoomAbout(start.offset, start.zoom, level, start.mid)
     place(level, { x: about.x + mid.x - start.mid.x, y: about.y + mid.y - start.mid.y })
   }
@@ -101,6 +114,30 @@ export function useLightboxZoom(
     zoomTo(zoom(), focal, 'press')
   }
 
+  function reflow(update: () => void) {
+    const before = geometry()
+    const wasZoomed = isZoomed(zoom())
+    const currentScale = scale.get()
+    update()
+    const after = geometry()
+    if (before.frame.width <= 0 || after.frame.width <= 0) return
+    if (
+      before.frame.width === after.frame.width &&
+      before.frame.height === after.frame.height &&
+      before.base === after.base &&
+      before.stage.width === after.stage.width &&
+      before.stage.height === after.stage.height
+    )
+      return
+    scale.stop()
+    scale.set((currentScale * before.frame.width) / after.frame.width)
+    zoomTo(wasZoomed ? zoom() : ZOOM_MIN, { x: 0, y: 0 })
+  }
+
+  function original() {
+    zoomTo(geometry().original, { x: 0, y: 0 })
+  }
+
   function pan(origin: Point, delta: Point) {
     const next = elasticOffset(
       { x: origin.x + delta.x, y: origin.y + delta.y },
@@ -133,6 +170,11 @@ export function useLightboxZoom(
 
   return {
     zoomed,
+    canZoomIn,
+    canToggle,
+    atOriginal,
+    original,
+    reflow,
     zoom,
     isZoomed: () => isZoomed(zoom()),
     zoomTo,

package/src/components/lightbox/lightbox.variants.ts

@@ -0,0 +1,5 @@
+import { tv } from '../../lib/tv'
+
+export const lightboxStage = tv({
+  base: 'dark fixed inset-0 z-(--hn-z-overlay) touch-none p-4 outline-none select-none sm:p-6',
+})

package/src/components/lightbox/types.ts

@@ -1,10 +1,14 @@
 import type { ImageVariants } from '../image/image.variants'
+import type { Rect } from './utils/pose'
+
+export type LightboxSource = HTMLImageElement | Rect
 
 export interface LightboxItem {
   id: string
   src: string
   preview?: string
+  previewSize?: { width: number; height: number }
   alt: string
   fit?: ImageVariants['fit']
-  source?: () => HTMLImageElement | null | undefined
+  source?: () => LightboxSource | null | undefined
 }

package/src/components/lightbox/utils/clip.ts

@@ -0,0 +1,117 @@
+import type { Rect } from './pose'
+
+export interface Corner {
+  x: number
+  y: number
+}
+
+export type Corners = [Corner, Corner, Corner, Corner]
+
+function emptyCorners(): Corners {
+  return [
+    { x: 0, y: 0 },
+    { x: 0, y: 0 },
+    { x: 0, y: 0 },
+    { x: 0, y: 0 },
+  ]
+}
+
+function length(value: string, size: number): number {
+  const number = Number.parseFloat(value) || 0
+  return value.endsWith('%') ? (number * size) / 100 : number
+}
+
+function cornersOf(style: CSSStyleDeclaration, width: number, height: number): Corners {
+  const corners = [
+    style.borderTopLeftRadius,
+    style.borderTopRightRadius,
+    style.borderBottomRightRadius,
+    style.borderBottomLeftRadius,
+  ].map(value => {
+    const [x = '0', y = x] = value.split(/\s+/)
+    return { x: length(x, width), y: length(y, height) }
+  }) as Corners
+  const [tl, tr, br, bl] = corners
+  const factor = Math.min(
+    1,
+    width / (tl.x + tr.x || 1),
+    width / (bl.x + br.x || 1),
+    height / (tl.y + bl.y || 1),
+    height / (tr.y + br.y || 1),
+  )
+  return corners.map(corner => ({ x: corner.x * factor, y: corner.y * factor })) as Corners
+}
+
+function paddingBox(node: Element, style: CSSStyleDeclaration) {
+  const box = node.getBoundingClientRect()
+  const width = node instanceof HTMLElement ? node.offsetWidth : box.width
+  const height = node instanceof HTMLElement ? node.offsetHeight : box.height
+  const sx = width ? box.width / width : 1
+  const sy = height ? box.height / height : 1
+  const left = Number.parseFloat(style.borderLeftWidth) || 0
+  const right = Number.parseFloat(style.borderRightWidth) || 0
+  const top = Number.parseFloat(style.borderTopWidth) || 0
+  const bottom = Number.parseFloat(style.borderBottomWidth) || 0
+  const corners = cornersOf(style, width, height)
+  const borders = [
+    [left, top],
+    [right, top],
+    [right, bottom],
+    [left, bottom],
+  ]
+  return {
+    rect: {
+      x: box.x + left * sx,
+      y: box.y + top * sy,
+      width: Math.max(0, box.width - (left + right) * sx),
+      height: Math.max(0, box.height - (top + bottom) * sy),
+    },
+    corners: corners.map((corner, index) => ({
+      x: Math.max(0, corner.x - borders[index]![0]!) * sx,
+      y: Math.max(0, corner.y - borders[index]![1]!) * sy,
+    })) as Corners,
+  }
+}
+
+function points(rect: Rect) {
+  return [
+    [rect.x, rect.y],
+    [rect.x + rect.width, rect.y],
+    [rect.x + rect.width, rect.y + rect.height],
+    [rect.x, rect.y + rect.height],
+  ]
+}
+
+export function clipOf(el: Element | null | undefined, box: Rect) {
+  let rect = { x: box.x, y: box.y, width: box.width, height: box.height }
+  const clips: ReturnType<typeof paddingBox>[] = []
+  for (let node = el; node; node = node.parentElement) {
+    const style = getComputedStyle(node)
+    const clipX = node === el || /^(hidden|clip|scroll|auto)$/.test(style.overflowX)
+    const clipY = node === el || /^(hidden|clip|scroll|auto)$/.test(style.overflowY)
+    if (!clipX && !clipY) continue
+    const clip = paddingBox(node, style)
+    const x = clipX ? Math.max(rect.x, clip.rect.x) : rect.x
+    const y = clipY ? Math.max(rect.y, clip.rect.y) : rect.y
+    const right = clipX
+      ? Math.min(rect.x + rect.width, clip.rect.x + clip.rect.width)
+      : rect.x + rect.width
+    const bottom = clipY
+      ? Math.min(rect.y + rect.height, clip.rect.y + clip.rect.height)
+      : rect.y + rect.height
+    rect = { x, y, width: Math.max(0, right - x), height: Math.max(0, bottom - y) }
+    if (clipX && clipY) clips.push(clip)
+  }
+  const corners = emptyCorners()
+  const visible = points(rect)
+  for (const clip of clips) {
+    const edges = points(clip.rect)
+    for (let index = 0; index < 4; index += 1) {
+      if (visible[index]!.some((value, axis) => Math.abs(value - edges[index]![axis]!) > 0.5))
+        continue
+      corners[index]!.x = Math.max(corners[index]!.x, clip.corners[index]!.x)
+      corners[index]!.y = Math.max(corners[index]!.y, clip.corners[index]!.y)
+    }
+  }
+  return { rect, corners }
+}

package/src/components/lightbox/utils/pose.ts

@@ -1,4 +1,5 @@
 import type { ImageVariants } from '../../image/image.variants'
+import type { Corners } from './clip'
 import { fitSize, rotatedSize, type Size } from './zoom'
 
 export interface Rect {
@@ -21,7 +22,7 @@ export const REST_POSE: Pose = {
   y: 0,
   scale: 1,
   rotate: 0,
-  clipPath: 'inset(0px 0px 0px 0px round 0px)',
+  clipPath: 'inset(0px 0px 0px 0px round 0px 0px 0px 0px / 0px 0px 0px 0px)',
 }
 export const TRAVEL_SPRING = { type: 'spring', visualDuration: 0.3, bounce: 0 } as const
 export const RETURN_SPRING = { ...TRAVEL_SPRING, visualDuration: 0.22 } as const
@@ -34,11 +35,15 @@ function px(value: number): string {
   return `${Math.round(value * 100) / 100}px`
 }
 
-export function fitRect(natural: Size, stage: Size, rotation = 0): Rect {
+export function fitRect(
+  natural: Size,
+  stage: Size & Partial<Pick<Rect, 'x' | 'y'>>,
+  rotation = 0,
+): Rect {
   const size = fitSize(natural, stage, rotation)
   return {
-    x: (stage.width - size.width) / 2,
-    y: (stage.height - size.height) / 2,
+    x: (stage.x ?? 0) + (stage.width - size.width) / 2,
+    y: (stage.y ?? 0) + (stage.height - size.height) / 2,
     width: size.width,
     height: size.height,
   }
@@ -79,39 +84,51 @@ export function openPose(
   box: Rect,
   natural: Size,
   fit?: ImageVariants['fit'],
-  radius = 0,
+  radius: number | Corners = 0,
+  clipBox = box,
 ): Pose {
   const rendered = renderedRect(box, natural, fit)
   if (frame.width <= 0 || frame.height <= 0 || rendered.width <= 0) return REST_POSE
   const scale = rendered.width / frame.width
-  const visible = intersect(box, rendered)
+  const visible = intersect(intersect(box, clipBox), rendered)
   const top = (visible.y - rendered.y) / scale
   const left = (visible.x - rendered.x) / scale
   const right = (rendered.x + rendered.width - visible.x - visible.width) / scale
   const bottom = (rendered.y + rendered.height - visible.y - visible.height) / scale
-  const corner = Math.max(0, radius) / scale
+  const corners =
+    typeof radius === 'number'
+      ? Array.from({ length: 4 }, () => ({ x: radius, y: radius }))
+      : radius
+  const leftEdge = Math.abs(visible.x - clipBox.x) <= 0.5
+  const topEdge = Math.abs(visible.y - clipBox.y) <= 0.5
+  const rightEdge = Math.abs(visible.x + visible.width - clipBox.x - clipBox.width) <= 0.5
+  const bottomEdge = Math.abs(visible.y + visible.height - clipBox.y - clipBox.height) <= 0.5
+  const touches = [
+    leftEdge && topEdge,
+    rightEdge && topEdge,
+    rightEdge && bottomEdge,
+    leftEdge && bottomEdge,
+  ]
+  const clipped = corners.map((corner, index) => (touches[index] ? corner : { x: 0, y: 0 }))
+  const horizontal = clipped.map(corner => px(Math.max(0, corner.x) / scale)).join(' ')
+  const vertical = clipped.map(corner => px(Math.max(0, corner.y) / scale)).join(' ')
   return {
     x: rendered.x + rendered.width / 2 - (frame.x + frame.width / 2),
     y: rendered.y + rendered.height / 2 - (frame.y + frame.height / 2),
     scale,
     rotate: 0,
-    clipPath: `inset(${px(top)} ${px(right)} ${px(bottom)} ${px(left)} round ${px(corner)})`,
+    clipPath: `inset(${px(top)} ${px(right)} ${px(bottom)} ${px(left)} round ${horizontal} / ${vertical})`,
   }
 }
 
-export function baseScale(frame: Size, stage: Size, rotation: number): number {
+export function baseScale(frame: Size, stage: Size, rotation: number, natural: Size): number {
   const visual = rotatedSize(frame, rotation)
   if (visual.width <= 0 || visual.height <= 0) return 1
-  if (rotation % 180 === 0) return 1
-  return Math.min(stage.width / visual.width, stage.height / visual.height)
-}
-
-export function radiusOf(el: Element | null | undefined): number {
-  for (let node = el, depth = 0; node && depth < 2; node = node.parentElement, depth += 1) {
-    const value = Number.parseFloat(getComputedStyle(node).borderTopLeftRadius)
-    if (value > 0) return value
-  }
-  return 0
+  return Math.min(
+    stage.width / visual.width,
+    stage.height / visual.height,
+    natural.width / frame.width,
+  )
 }
 
 export function dismissProgress(offsetY: number, stageHeight: number): number {

package/src/components/lightbox/utils/source.ts

@@ -0,0 +1,17 @@
+import type { LightboxSource } from '../types'
+import type { Rect } from './pose'
+
+export function sourceRect(source: LightboxSource | null | undefined): Rect | null {
+  if (!source) return null
+  const isElement = 'getBoundingClientRect' in source
+  if (isElement && !source.isConnected) return null
+  const rect = isElement ? source.getBoundingClientRect() : source
+  if (
+    ![rect.x, rect.y, rect.width, rect.height].every(Number.isFinite) ||
+    rect.width <= 0 ||
+    rect.height <= 0
+  ) {
+    return null
+  }
+  return { x: rect.x, y: rect.y, width: rect.width, height: rect.height }
+}

package/src/components/lightbox/utils/zoom.ts

@@ -16,8 +16,7 @@ export interface Bounds {
 }
 
 export const ZOOM_MIN = 1
-export const ZOOM_MAX = 6
-export const ZOOM_DOUBLE_TAP = 2.5
+export const ZOOM_MAX = 2
 export const ZOOM_STEP = 1.5
 export const OVERSHOOT = 0.55
 export const WHEEL_INTENSITY = 0.002
@@ -36,7 +35,7 @@ export function rotatedSize(size: Size, rotation: number): Size {
 export function fitSize(natural: Size, stage: Size, rotation = 0): Size {
   const upright = rotatedSize(natural, rotation)
   if (upright.width <= 0 || upright.height <= 0) return { width: 0, height: 0 }
-  const scale = Math.min(stage.width / upright.width, stage.height / upright.height)
+  const scale = Math.min(1, stage.width / upright.width, stage.height / upright.height)
   return { width: upright.width * scale, height: upright.height * scale }
 }
 
@@ -104,10 +103,25 @@ export function wheelZoom(zoom: number, deltaY: number, intensity = WHEEL_INTENS
   return zoom * Math.exp(-deltaY * intensity)
 }
 
-export function doubleTapZoom(zoom: number): number {
-  return isZoomed(zoom) ? ZOOM_MIN : ZOOM_DOUBLE_TAP
+export function zoomLevels(natural: Size, fit: Size, stage: Size) {
+  const original = fit.width > 0 ? Math.max(ZOOM_MIN, natural.width / fit.width) : ZOOM_MIN
+  const secondary =
+    natural.height > natural.width * 2
+      ? Math.min(original, stage.width / fit.width)
+      : natural.width > natural.height * 2
+        ? Math.min(original, stage.height / fit.height)
+        : original
+  return {
+    original,
+    secondary: Number.isFinite(secondary) ? Math.max(ZOOM_MIN, secondary) : ZOOM_MIN,
+    max: original * ZOOM_MAX,
+  }
+}
+
+export function doubleTapZoom(zoom: number, secondary: number): number {
+  return isZoomed(zoom) ? ZOOM_MIN : secondary
 }
 
-export function stepZoom(zoom: number, direction: 1 | -1): number {
-  return clampZoom(zoom * ZOOM_STEP ** direction)
+export function stepZoom(zoom: number, direction: 1 | -1, max = ZOOM_MAX): number {
+  return clampZoom(zoom * ZOOM_STEP ** direction, ZOOM_MIN, max)
 }

package/src/components/pagination/Pagination.vue

@@ -0,0 +1,118 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { PaginationRoot } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useDirection } from '../../lib/useDirection'
+  import { useUiLocale } from '../../locale'
+  import LoadingOverlay from '../loading-overlay/LoadingOverlay.vue'
+  import PaginationContent from './PaginationContent.vue'
+  import PaginationInfo from './PaginationInfo.vue'
+  import PaginationSize from './PaginationSize.vue'
+  import PaginationJump from './PaginationJump.vue'
+  import { providePagination } from './context'
+  import { usePagination } from './composables/usePagination'
+  import { pagination } from './pagination.variants'
+  import type { PaginationChange, PaginationState } from './types'
+
+  defineOptions({ name: 'HnPagination', inheritAttrs: false })
+  const props = withDefaults(
+    defineProps<{
+      total: number
+      itemCount?: number
+      siblingCount?: number
+      showEdges?: boolean
+      showFirstLast?: boolean
+      showInfo?: boolean
+      showJump?: boolean
+      hideSinglePage?: boolean
+      pageSizeOptions?: number[]
+      pending?: boolean
+      align?: 'start' | 'center' | 'end' | 'between'
+      size?: 'sm' | 'md' | 'lg'
+      disabled?: boolean
+      dir?: 'ltr' | 'rtl'
+      label?: string
+      class?: string
+    }>(),
+    { siblingCount: 1, showEdges: true, size: 'md', align: 'start' },
+  )
+  const model = defineModel<number>({ default: 1 })
+  const sizeModel = defineModel<number>('pageSize', { default: 10 })
+  const emit = defineEmits<{ change: [value: PaginationChange] }>()
+  defineSlots<{
+    default?(state: PaginationState): unknown
+    list?(state: PaginationState): unknown
+    page?(props: { page: number; selected: boolean }): unknown
+    ellipsis?(props: { side: 'prev' | 'next'; expanded: boolean }): unknown
+  }>()
+  const t = useUiLocale()
+  const { root, direction, rootDirection } = useDirection(() => props.dir)
+  const { total, pageSize, siblingCount, page, state, blocked, sizes, update, resize } =
+    usePagination(props, model, sizeModel, value => emit('change', value))
+  providePagination({
+    state,
+    blocked,
+    siblingCount,
+    update,
+    resize,
+    direction,
+    size: computed(() => props.size),
+    showFirstLast: computed(() => props.showFirstLast),
+    options: computed(() =>
+      sizes.value.map(value => ({ value, label: t.value.pagination.pageSizeOption(value) })),
+    ),
+  })
+</script>
+
+<template>
+  <div
+    ref="root"
+    v-bind="$attrs"
+    data-hn-pagination
+    :dir="rootDirection"
+    :aria-busy="props.pending || undefined"
+    :class="cn('max-w-full', $slots.list && 'flex min-h-0 flex-col gap-3', props.class)"
+  >
+    <div v-if="$slots.list" class="relative min-h-0 flex-auto">
+      <div :inert="props.pending || undefined"><slot name="list" v-bind="state" /></div>
+      <LoadingOverlay :visible="props.pending" />
+    </div>
+    <PaginationRoot
+      v-if="!props.hideSinglePage || state.pageCount > 1"
+      :page="page"
+      :total="total"
+      :items-per-page="pageSize"
+      :sibling-count="siblingCount"
+      :show-edges="props.showEdges"
+      :disabled="blocked"
+      as-child
+      @update:page="update"
+    >
+      <nav
+        :aria-label="props.label ?? t.pagination.navLabel"
+        :inert="props.pending || undefined"
+        :data-disabled="blocked ? '' : undefined"
+        :class="pagination({ align: props.align })"
+      >
+        <slot v-bind="state">
+          <PaginationInfo v-if="props.showInfo" />
+          <PaginationContent>
+            <template v-if="$slots.page" #page="slotProps">
+              <slot name="page" v-bind="slotProps" />
+            </template>
+            <template v-if="$slots.ellipsis" #ellipsis="slotProps">
+              <slot name="ellipsis" v-bind="slotProps" />
+            </template>
+          </PaginationContent>
+          <div
+            v-if="props.pageSizeOptions?.length || props.showJump"
+            class="flex max-w-full flex-wrap items-center gap-3"
+          >
+            <PaginationSize v-if="props.pageSizeOptions?.length" />
+            <PaginationJump v-if="props.showJump" />
+          </div>
+        </slot>
+      </nav>
+    </PaginationRoot>
+  </div>
+</template>

package/src/components/pagination/PaginationContent.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import { shallowRef } from 'vue'
+  import { PaginationList } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import PaginationPages from './PaginationPages.vue'
+  import { paginationList } from './pagination.variants'
+  defineOptions({ name: 'HnPaginationContent' })
+  const props = defineProps<{ class?: string }>()
+  defineSlots<{
+    page?(props: { page: number; selected: boolean }): unknown
+    ellipsis?(props: { side: 'prev' | 'next'; expanded: boolean }): unknown
+  }>()
+  const host = shallowRef<HTMLElement>()
+</script>
+
+<template>
+  <PaginationList v-slot="{ items }" as-child>
+    <ul ref="host" data-hn-pagination-content :class="cn(paginationList(), props.class)">
+      <PaginationPages :items="items" :host="host">
+        <template v-if="$slots.page" #page="slotProps">
+          <slot name="page" v-bind="slotProps" />
+        </template>
+        <template v-if="$slots.ellipsis" #ellipsis="slotProps">
+          <slot name="ellipsis" v-bind="slotProps" />
+        </template>
+      </PaginationPages>
+    </ul>
+  </PaginationList>
+</template>

package/src/components/pagination/PaginationControl.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+  import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from '@lucide/vue'
+  import { PaginationFirst, PaginationPrev, PaginationNext, PaginationLast } from 'reka-ui'
+  import { useUiLocale } from '../../locale'
+  import Button from '../button/Button.vue'
+  import type { ButtonVariants } from '../button/button.variants'
+  import { paginationArrow } from './pagination.variants'
+
+  defineOptions({ name: 'HnPaginationControl' })
+
+  const props = defineProps<{
+    action: 'first' | 'prev' | 'next' | 'last'
+    size?: ButtonVariants['size']
+    dir: 'ltr' | 'rtl'
+  }>()
+  const t = useUiLocale()
+  const controls = {
+    first: { component: PaginationFirst, icon: ChevronsLeft },
+    prev: { component: PaginationPrev, icon: ChevronLeft },
+    next: { component: PaginationNext, icon: ChevronRight },
+    last: { component: PaginationLast, icon: ChevronsRight },
+  }
+</script>
+
+<template>
+  <component :is="controls[props.action].component" as-child>
+    <Button
+      variant="ghost"
+      tone="neutral"
+      :size="props.size"
+      icon-only
+      :aria-label="t.pagination[props.action]"
+      :data-hn-pagination-action="props.action"
+    >
+      <component
+        :is="controls[props.action].icon"
+        aria-hidden="true"
+        :class="paginationArrow({ dir: props.dir })"
+      />
+    </Button>
+  </component>
+</template>