@hina-ui/vue 1.3.1 → 1.5.0

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

@@ -6,6 +6,7 @@ export const LARGE_HINT_DELAY_MS = 800
 export function useLightboxLarge(item: () => LightboxItem | undefined, active: () => boolean) {
   const src = shallowRef<string>()
   const ready = shallowRef(false)
+  const image = shallowRef<HTMLImageElement>()
   const waiting = shallowRef(false)
   let loader: HTMLImageElement | null = null
   let timer: ReturnType<typeof setTimeout> | null = null
@@ -17,6 +18,7 @@ export function useLightboxLarge(item: () => LightboxItem | undefined, active: (
     timer = null
     src.value = undefined
     ready.value = false
+    image.value = undefined
     waiting.value = false
   }
 
@@ -36,6 +38,7 @@ export function useLightboxLarge(item: () => LightboxItem | undefined, active: (
       if (timer) clearTimeout(timer)
       timer = null
       waiting.value = false
+      image.value = img
       ready.value = true
     }
     const decode = typeof img.decode === 'function' ? img.decode() : Promise.resolve()
@@ -58,5 +61,5 @@ export function useLightboxLarge(item: () => LightboxItem | undefined, active: (
 
   onBeforeUnmount(reset)
 
-  return { src, ready, waiting }
+  return { src, ready, waiting, image }
 }

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

@@ -0,0 +1,44 @@
+import { watch } from 'vue'
+import { useResizeObserver } from '@vueuse/core'
+import type { LightboxItem } from '../types'
+import type { useLightboxFrames } from './useLightboxFrames'
+import type { useLightboxLarge } from './useLightboxLarge'
+import type { useLightboxPhase } from './useLightboxPhase'
+import type { useLightboxZoom } from './useLightboxZoom'
+
+export function useLightboxLayout(options: {
+  stage: () => HTMLElement | undefined
+  current: () => LightboxItem | undefined
+  frames: ReturnType<typeof useLightboxFrames>
+  large: ReturnType<typeof useLightboxLarge>
+  phase: ReturnType<typeof useLightboxPhase>
+  zoom: ReturnType<typeof useLightboxZoom>
+  measure: () => void
+}) {
+  function sync() {
+    if (options.phase.current() !== 'open') return
+    options.zoom.reflow(() => {
+      options.measure()
+      options.frames.learnPreview(options.current(), options.large.image.value)
+    })
+  }
+
+  function learn(id: string, img: HTMLImageElement) {
+    const update = () => options.frames.learn(id, img)
+    if (options.phase.current() === 'open' && options.current()?.id === id)
+      options.zoom.reflow(update)
+    else update()
+  }
+
+  watch(() => [options.phase.current(), options.current(), options.large.image.value], sync, {
+    flush: 'post',
+  })
+  useResizeObserver(() => {
+    const stage = options.stage()
+    if (!stage) return []
+    const chrome = stage.querySelector<HTMLElement>('[data-hn-chrome]')
+    return chrome ? [stage, chrome] : [stage]
+  }, sync)
+
+  return { learn }
+}

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

@@ -1,4 +1,4 @@
-import { nextTick, shallowRef, type Ref } from 'vue'
+import { nextTick, onScopeDispose, shallowRef, type Ref } from 'vue'
 import type { useLightboxMotion } from './useLightboxMotion'
 import type { Pose } from '../utils/pose'
 
@@ -10,7 +10,7 @@ export function useLightboxPhase(options: {
   locked: Ref<boolean>
   motion: ReturnType<typeof useLightboxMotion>
   pose: () => Pose | null
-  prepare: () => void
+  prepare: () => void | Promise<void>
   layout: () => void
 }) {
   const { motion } = options
@@ -21,10 +21,13 @@ export function useLightboxPhase(options: {
     if (phase.value !== 'closed') return
     phase.value = 'entering'
     const run = ++generation
-    options.prepare()
+    const preparing = options.prepare()
+    if (preparing) await preparing
+    if (run !== generation) return
     options.mounted.value = true
     options.locked.value = true
     await nextTick()
+    if (run !== generation) return
     options.layout()
     await motion.enter(options.pose())
     if (run === generation) phase.value = 'open'
@@ -42,7 +45,7 @@ export function useLightboxPhase(options: {
     if (phase.value === 'closed' || phase.value === 'closing') return
     phase.value = 'closing'
     const run = ++generation
-    await motion.leave(options.pose())
+    if (options.mounted.value) await motion.leave(options.pose())
     if (run !== generation) return
     phase.value = 'closed'
     options.mounted.value = false
@@ -55,5 +58,10 @@ export function useLightboxPhase(options: {
     else if (phase.value === 'closing') void reopen()
   }
 
+  onScopeDispose(() => {
+    generation++
+    motion.stop()
+  })
+
   return { current: () => phase.value, show, close, reopen, interrupt }
 }

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

@@ -1,35 +1,33 @@
 import type { useLightboxFrames } from './useLightboxFrames'
-import { openPose, type Pose, type Rect } from '../utils/pose'
+import { openPose, type Pose } from '../utils/pose'
 import { clipOf } from '../utils/clip'
+import { sourceRect } from '../utils/source'
 import type { LightboxItem } from '../types'
 
 export function useLightboxPose(
   frames: ReturnType<typeof useLightboxFrames>,
   current: () => LightboxItem | undefined,
 ) {
-  function sourceBox(): Rect | null {
-    const el = current()?.source?.()
-    if (!el?.isConnected) return null
-    const rect = el.getBoundingClientRect()
-    if (rect.width <= 0 || rect.height <= 0) return null
+  function fromSource(): Pose | null {
+    const item = current()
+    const source = item?.source?.()
+    const box = sourceRect(source)
+    const el = source && 'getBoundingClientRect' in source ? source : undefined
+    const natural =
+      el?.naturalWidth && el.naturalHeight
+        ? { width: el.naturalWidth, height: el.naturalHeight }
+        : (frames.naturalOf(item) ?? frames.displayOf(item))
+    if (!box || !natural) return null
     const stage = frames.stage.value
     if (
-      rect.bottom <= 0 ||
-      rect.right <= 0 ||
-      rect.top >= stage.height ||
-      rect.left >= stage.width
+      box.y + box.height <= 0 ||
+      box.x + box.width <= 0 ||
+      box.y >= stage.height ||
+      box.x >= stage.width
     ) {
       return null
     }
-    return { x: rect.x, y: rect.y, width: rect.width, height: rect.height }
-  }
-
-  function fromSource(): Pose | null {
-    const item = current()
-    const box = sourceBox()
-    const natural = frames.naturalOf(item)
-    if (!box || !natural) return null
-    const clip = clipOf(item?.source?.(), box)
+    const clip = clipOf(el, box)
     if (clip.rect.width <= 0 || clip.rect.height <= 0) return null
     return openPose(frames.frameOf(item), box, natural, item?.fit, clip.corners, clip.rect)
   }

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

@@ -1,7 +1,7 @@
 import { reactive } from 'vue'
 import type { useLightboxFrames } from './useLightboxFrames'
 import { baseScale } from '../utils/pose'
-import { rotatedSize } from '../utils/zoom'
+import { rotatedSize, zoomLevels } from '../utils/zoom'
 import type { LightboxItem } from '../types'
 
 export function useLightboxRotation(
@@ -15,17 +15,27 @@ export function useLightboxRotation(
   }
 
   function baseOf(item: LightboxItem | undefined): number {
-    return baseScale(frames.frameOf(item), frames.stage.value, rotationOf(item) % 360)
+    const frame = frames.frameOf(item)
+    return baseScale(
+      frame,
+      frames.area.value,
+      rotationOf(item) % 360,
+      frames.displayOf(item) ?? frame,
+    )
   }
 
   function geometry() {
     const item = current()
     const base = baseOf(item)
     const visual = rotatedSize(frames.frameOf(item), rotationOf(item) % 360)
+    const fit = { width: visual.width * base, height: visual.height * base }
+    const natural = rotatedSize(frames.displayOf(item) ?? fit, rotationOf(item) % 360)
     return {
-      fit: { width: visual.width * base, height: visual.height * base },
-      stage: frames.stage.value,
+      fit,
+      frame: frames.frameOf(item),
+      stage: frames.area.value,
       base,
+      ...zoomLevels(natural, fit, frames.area.value),
     }
   }
 

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/pose.ts

@@ -35,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,
   }
@@ -117,11 +121,14 @@ export function openPose(
   }
 }
 
-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)
+  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>