@hina-ui/vue 1.7.4 → 1.7.6

package/src/components/form/utils/values.ts

@@ -1,23 +1 @@
-function isPlain(value: unknown): value is Record<string, unknown> {
-  return Object.prototype.toString.call(value) === '[object Object]'
-}
-
-export function snapshot(value: unknown): unknown {
-  if (Array.isArray(value)) return value.map(snapshot)
-  if (isPlain(value)) {
-    return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, snapshot(item)]))
-  }
-  return value
-}
-
-export function same(a: unknown, b: unknown): boolean {
-  if (a === b) return true
-  if (Array.isArray(a) && Array.isArray(b)) {
-    return a.length === b.length && a.every((item, index) => same(item, b[index]))
-  }
-  if (isPlain(a) && isPlain(b)) {
-    const keys = Object.keys(a)
-    return keys.length === Object.keys(b).length && keys.every(key => same(a[key], b[key]))
-  }
-  return false
-}
+export * from '../../../../../shared/src/lib/form/values'

package/src/components/form-field/FormField.vue

@@ -39,7 +39,8 @@
   const form = injectForm()
 
   const root = shallowRef<HTMLElement | null>(null)
-  const hooks = collapseHooks('y', () => root.value)
+  const body = shallowRef<HTMLElement | null>(null)
+  const hooks = collapseHooks('y', () => body.value)
 
   const id = useId()
   const labelId = useId()
@@ -111,7 +112,7 @@
           <slot name="description">{{ props.description }}</slot>
         </p>
       </div>
-      <div data-hn-form-field-body :class="formFieldContent()">
+      <div ref="body" data-hn-form-field-body :class="formFieldContent()">
         <div
           data-hn-form-field-control
           :class="formFieldControl({ orientation: contentOrientation })"

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

@@ -1,4 +1,4 @@
-import { useTransform } from 'motion-v'
+import { useMotionValue, useTransform } from 'motion-v'
 import type { useLightboxMotion } from './useLightboxMotion'
 import type { useLightboxFrames } from './useLightboxFrames'
 import type { useLightboxPaging } from './useLightboxPaging'
@@ -10,6 +10,11 @@ export function useLightboxHint(options: {
   paging: ReturnType<typeof useLightboxPaging>
   current: () => LightboxItem | undefined
 }) {
+  // useTransform's subscription refresh queues frame callbacks even during SSR.
+  // Node never drains that queue, retaining the request through these closures.
+  // The hint is only rendered inside the client-mounted lightbox.
+  if (typeof window === 'undefined') return { x: useMotionValue(0), y: useMotionValue(0) }
+
   const { motion, frames, paging } = options
 
   function corner() {

package/src/components/lightbox/types.ts

@@ -1,14 +1 @@
-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?: () => LightboxSource | null | undefined
-}
+export * from '../../../../shared/src/lib/lightbox/types'

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

@@ -1,117 +1 @@
-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 }
-}
+export * from '../../../../../shared/src/lib/lightbox/clip'

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

@@ -1,29 +1 @@
-export function fileNameOf(url: string, fallback = 'image'): string {
-  try {
-    const parsed = new URL(url, 'http://localhost')
-    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return fallback
-    const name = decodeURIComponent(parsed.pathname.split('/').filter(Boolean).pop() ?? '')
-    return name || fallback
-  } catch {
-    return fallback
-  }
-}
-
-export async function saveImage(url: string): Promise<'saved' | 'opened'> {
-  try {
-    const response = await fetch(url, { mode: 'cors' })
-    if (!response.ok) throw new Error(String(response.status))
-    const blob = await response.blob()
-    const href = URL.createObjectURL(blob)
-    const anchor = Object.assign(document.createElement('a'), {
-      href,
-      download: fileNameOf(url),
-    })
-    anchor.click()
-    setTimeout(() => URL.revokeObjectURL(href), 0)
-    return 'saved'
-  } catch {
-    window.open(url, '_blank', 'noopener')
-    return 'opened'
-  }
-}
+export * from '../../../../../shared/src/lib/lightbox/download'

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

@@ -1,54 +1 @@
-import type { Point } from './zoom'
-
-export interface Touch extends Point {
-  time: number
-}
-
-export const DRAG_THRESHOLD = 4
-export const TAP_MAX_DISTANCE = 10
-export const TAP_MAX_MS = 300
-export const DOUBLE_TAP_MS = 300
-export const DOUBLE_TAP_DISTANCE = 25
-export const WHEEL_LINE = 16
-export const TRACKPAD_INTENSITY = 0.01
-
-export const FLING = {
-  power: 0.8,
-  timeConstant: 750,
-  bounceStiffness: 200,
-  bounceDamping: 40,
-  restDelta: 1,
-  restSpeed: 10,
-} as const
-
-export function midpoint(a: Point, b: Point): Point {
-  return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 }
-}
-
-export function distance(a: Point, b: Point): number {
-  return Math.hypot(b.x - a.x, b.y - a.y)
-}
-
-export function dragAxis(start: Point, current: Point): 'x' | 'y' | null {
-  const dx = Math.abs(current.x - start.x)
-  const dy = Math.abs(current.y - start.y)
-  if (Math.max(dx, dy) < DRAG_THRESHOLD) return null
-  return dx > dy ? 'x' : 'y'
-}
-
-export function isTap(start: Touch, end: Touch): boolean {
-  return distance(start, end) <= TAP_MAX_DISTANCE && end.time - start.time <= TAP_MAX_MS
-}
-
-export function isDoubleTap(previous: Touch | null, next: Touch): boolean {
-  if (!previous) return false
-  return (
-    next.time - previous.time <= DOUBLE_TAP_MS && distance(previous, next) <= DOUBLE_TAP_DISTANCE
-  )
-}
-
-export function wheelDelta(deltaY: number, deltaMode: number, stageHeight: number): number {
-  if (deltaMode === 1) return deltaY * WHEEL_LINE
-  if (deltaMode === 2) return deltaY * stageHeight
-  return deltaY
-}
+export * from '../../../../../shared/src/lib/lightbox/gesture'

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

@@ -1,33 +1 @@
-import { rubberBand } from './zoom'
-
-export const PAGE_COMMIT = 0.2
-export const PAGE_VELOCITY = 400
-export const PAGE_PROJECTION = 0.25
-
-export function pageSteps(offset: number, velocity: number, width: number): number {
-  if (width <= 0) return 0
-  if (Math.abs(offset) < width * PAGE_COMMIT && Math.abs(velocity) < PAGE_VELOCITY) return 0
-  const projected = offset + velocity * PAGE_PROJECTION
-  if (projected === 0) return 0
-  return projected < 0 ? 1 : -1
-}
-
-export function clampIndex(index: number, count: number): number {
-  if (count <= 0) return 0
-  return Math.min(Math.max(index, 0), count - 1)
-}
-
-export function wrapIndex(index: number, count: number): number {
-  if (count <= 0) return 0
-  return ((index % count) + count) % count
-}
-
-export function shortestDelta(delta: number, count: number): number {
-  if (count <= 0) return 0
-  const forward = wrapIndex(delta, count)
-  return forward > count / 2 ? forward - count : forward
-}
-
-export function edgePosition(raw: number, count: number, width: number): number {
-  return rubberBand(raw, -Math.max(0, count - 1) * width, 0, width)
-}
+export * from '../../../../../shared/src/lib/lightbox/paging'

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

@@ -1,142 +1 @@
-import type { ImageVariants } from '../../image/image.variants'
-import type { Corners } from './clip'
-import { fitSize, rotatedSize, type Size } from './zoom'
-
-export interface Rect {
-  x: number
-  y: number
-  width: number
-  height: number
-}
-
-export interface Pose {
-  x: number
-  y: number
-  scale: number
-  rotate: number
-  clipPath: string
-}
-
-export const REST_POSE: Pose = {
-  x: 0,
-  y: 0,
-  scale: 1,
-  rotate: 0,
-  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
-export const DISMISS_SCALE = 0.7
-export const DISMISS_TRAVEL = 0.3
-export const DISMISS_COMMIT = 0.5
-export const DISMISS_VELOCITY = 600
-
-function px(value: number): string {
-  return `${Math.round(value * 100) / 100}px`
-}
-
-export function fitRect(
-  natural: Size,
-  stage: Size & Partial<Pick<Rect, 'x' | 'y'>>,
-  rotation = 0,
-): Rect {
-  const size = fitSize(natural, stage, rotation)
-  return {
-    x: (stage.x ?? 0) + (stage.width - size.width) / 2,
-    y: (stage.y ?? 0) + (stage.height - size.height) / 2,
-    width: size.width,
-    height: size.height,
-  }
-}
-
-export function renderedRect(box: Rect, natural: Size, fit: ImageVariants['fit'] = 'cover'): Rect {
-  if (fit === 'fill' || natural.width <= 0 || natural.height <= 0) return { ...box }
-  const contain = Math.min(box.width / natural.width, box.height / natural.height)
-  const cover = Math.max(box.width / natural.width, box.height / natural.height)
-  const scale =
-    fit === 'cover'
-      ? cover
-      : fit === 'contain'
-        ? contain
-        : fit === 'none'
-          ? 1
-          : Math.min(contain, 1)
-  const width = natural.width * scale
-  const height = natural.height * scale
-  return {
-    x: box.x + (box.width - width) / 2,
-    y: box.y + (box.height - height) / 2,
-    width,
-    height,
-  }
-}
-
-function intersect(a: Rect, b: Rect): Rect {
-  const x = Math.max(a.x, b.x)
-  const y = Math.max(a.y, b.y)
-  const right = Math.min(a.x + a.width, b.x + b.width)
-  const bottom = Math.min(a.y + a.height, b.y + b.height)
-  return { x, y, width: Math.max(0, right - x), height: Math.max(0, bottom - y) }
-}
-
-export function openPose(
-  frame: Rect,
-  box: Rect,
-  natural: Size,
-  fit?: ImageVariants['fit'],
-  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(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 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 ${horizontal} / ${vertical})`,
-  }
-}
-
-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
-  return Math.min(
-    stage.width / visual.width,
-    stage.height / visual.height,
-    natural.width / frame.width,
-  )
-}
-
-export function dismissProgress(offsetY: number, stageHeight: number): number {
-  if (stageHeight <= 0) return 0
-  return Math.min(1, Math.max(0, offsetY) / (stageHeight * DISMISS_TRAVEL))
-}
-
-export function shouldDismiss(offsetY: number, velocityY: number, stageHeight: number): boolean {
-  if (offsetY <= 0) return false
-  return dismissProgress(offsetY, stageHeight) >= DISMISS_COMMIT || velocityY >= DISMISS_VELOCITY
-}
+export * from '../../../../../shared/src/lib/lightbox/pose'

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

@@ -1,17 +1 @@
-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 }
-}
+export * from '../../../../../shared/src/lib/lightbox/source'

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

@@ -1,127 +1 @@
-export interface Size {
-  width: number
-  height: number
-}
-
-export interface Point {
-  x: number
-  y: number
-}
-
-export interface Bounds {
-  minX: number
-  maxX: number
-  minY: number
-  maxY: number
-}
-
-export const ZOOM_MIN = 1
-export const ZOOM_MAX = 2
-export const ZOOM_STEP = 1.5
-export const OVERSHOOT = 0.55
-export const WHEEL_INTENSITY = 0.002
-
-export const ZOOM_EPSILON = 0.001
-
-export function isZoomed(zoom: number): boolean {
-  return zoom > ZOOM_MIN + ZOOM_EPSILON
-}
-
-export function rotatedSize(size: Size, rotation: number): Size {
-  const quarter = Math.round(rotation / 90) % 2
-  return quarter === 0 ? size : { width: size.height, height: size.width }
-}
-
-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(1, stage.width / upright.width, stage.height / upright.height)
-  return { width: upright.width * scale, height: upright.height * scale }
-}
-
-export function panBounds(displayed: Size, stage: Size): Bounds {
-  const x = Math.max(0, (displayed.width - stage.width) / 2)
-  const y = Math.max(0, (displayed.height - stage.height) / 2)
-  return { minX: x ? -x : 0, maxX: x, minY: y ? -y : 0, maxY: y }
-}
-
-export function clampOffset(offset: Point, bounds: Bounds): Point {
-  return {
-    x: Math.min(Math.max(offset.x, bounds.minX), bounds.maxX),
-    y: Math.min(Math.max(offset.y, bounds.minY), bounds.maxY),
-  }
-}
-
-export function zoomAbout(offset: Point, zoom: number, next: number, focal: Point): Point {
-  const ratio = next / zoom
-  return {
-    x: focal.x - (focal.x - offset.x) * ratio,
-    y: focal.y - (focal.y - offset.y) * ratio,
-  }
-}
-
-function resist(over: number, span: number, coefficient: number): number {
-  return (1 - 1 / ((over * coefficient) / span + 1)) * span
-}
-
-export function rubberBand(
-  value: number,
-  min: number,
-  max: number,
-  span: number,
-  coefficient = OVERSHOOT,
-): number {
-  if (span <= 0) return Math.min(Math.max(value, min), max)
-  if (value > max) return max + resist(value - max, span, coefficient)
-  if (value < min) return min - resist(min - value, span, coefficient)
-  return value
-}
-
-export function elasticOffset(offset: Point, bounds: Bounds, stage: Size): Point {
-  return {
-    x: rubberBand(offset.x, bounds.minX, bounds.maxX, stage.width),
-    y: rubberBand(offset.y, bounds.minY, bounds.maxY, stage.height),
-  }
-}
-
-export function clampZoom(zoom: number, min = ZOOM_MIN, max = ZOOM_MAX): number {
-  return Math.min(Math.max(zoom, min), max)
-}
-
-export function elasticZoom(zoom: number, min = ZOOM_MIN, max = ZOOM_MAX): number {
-  const lo = Math.log(min)
-  const hi = Math.log(max)
-  return Math.exp(rubberBand(Math.log(zoom), lo, hi, hi - lo))
-}
-
-export function pinchZoom(startZoom: number, startDistance: number, distance: number): number {
-  if (startDistance <= 0) return startZoom
-  return startZoom * (distance / startDistance)
-}
-
-export function wheelZoom(zoom: number, deltaY: number, intensity = WHEEL_INTENSITY): number {
-  return zoom * Math.exp(-deltaY * intensity)
-}
-
-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, max = ZOOM_MAX): number {
-  return clampZoom(zoom * ZOOM_STEP ** direction, ZOOM_MIN, max)
-}
+export * from '../../../../../shared/src/lib/lightbox/zoom'

package/src/components/meter-group/utils/tones.ts

@@ -1,14 +1 @@
-import type { MeterTone } from '../types'
-
-export const METER_TONES: MeterTone[] = [
-  'accent',
-  'info',
-  'success',
-  'warning',
-  'danger',
-  'neutral',
-]
-
-export function toneAt(index: number): MeterTone {
-  return METER_TONES[index % METER_TONES.length]!
-}
+export * from '../../../../../shared/src/lib/meter-group'

package/src/components/multi-select/MultiSelect.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
   import { computed, ref } from 'vue'
-  import { SelectRoot, SelectTrigger } from 'reka-ui'
+  import { SelectRoot, SelectTrigger, VisuallyHidden } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { useUiLocale } from '../../locale'
   import Chip from '../chip/Chip.vue'
-  import VisuallyHidden from '../visually-hidden/VisuallyHidden.vue'
   import { X } from '@lucide/vue'
   import InputAction from '../input/InputAction.vue'
   import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'

package/src/components/number-input/NumberInput.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
   import { computed } from 'vue'
   import { ChevronDown, ChevronUp } from '@lucide/vue'
+  import { useForwardPropsEmits } from 'reka-ui'
   import {
     NumberFieldDecrement,
     NumberFieldIncrement,
     NumberFieldInput,
     NumberFieldRoot,
-    useForwardPropsEmits,
     type NumberFieldRootEmits,
-  } from 'reka-ui'
+  } from '../../primitives/number-field'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
   import { useFieldControl } from '../form-field/context'

package/src/components/pagination/composables/usePagination.ts

@@ -1,4 +1,5 @@
 import { computed, watch, type Ref } from 'vue'
+import { paginationInteger } from '../../../../../shared/src/lib/pagination'
 import type { PaginationChange, PaginationState } from '../types'
 
 interface PaginationOptions {
@@ -10,9 +11,7 @@ interface PaginationOptions {
   pending?: boolean
 }
 
-export function paginationInteger(value: number, fallback: number, minimum: number) {
-  return Number.isFinite(value) ? Math.max(minimum, Math.floor(value)) : fallback
-}
+export { paginationInteger }
 
 export function usePagination(
   props: PaginationOptions,