@hina-ui/vue 1.7.5 → 1.7.6

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,

package/src/components/pagination/types.ts

@@ -1,19 +1 @@
-export interface PaginationChange {
-  page: number
-  pageSize: number
-}
-
-export interface PaginationState extends PaginationChange {
-  total: number
-  pageCount: number
-  from: number
-  to: number
-}
-
-export type PaginationEntry = { type: 'page'; value: number } | { type: 'ellipsis' }
-export type PaginationSide = 'prev' | 'next'
-export interface PaginationRange {
-  side: PaginationSide
-  from: number
-  to: number
-}
+export * from '../../../../shared/src/types/pagination'

package/src/components/pagination/utils/ranges.ts

@@ -1,12 +1 @@
-import type { PaginationEntry, PaginationRange } from '../types'
-
-export function paginationRanges(items: PaginationEntry[]): PaginationRange[] {
-  return items.flatMap((item, index) => {
-    if (item.type !== 'ellipsis') return []
-    const previous = items[index - 1]
-    const next = items[index + 1]
-    if (previous?.type !== 'page' || next?.type !== 'page' || next.value <= previous.value + 1)
-      return []
-    return [{ side: index === 1 ? 'prev' : 'next', from: previous.value + 1, to: next.value - 1 }]
-  })
-}
+export * from '../../../../../shared/src/lib/pagination'

package/src/components/password-input/PasswordInput.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  import { shallowRef } from 'vue'
   import { Eye, EyeOff } from '@lucide/vue'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
@@ -20,10 +21,15 @@
   const visible = defineModel<boolean>('visible', { default: false })
 
   const t = useUiLocale()
+
+  const base = shallowRef<InstanceType<typeof InputBase> | null>(null)
+
+  defineExpose({ clear: () => base.value?.clear(), focus: () => base.value?.focus() })
 </script>
 
 <template>
   <InputBase
+    ref="base"
     v-bind="$attrs"
     v-model="model"
     :type="visible ? 'text' : 'password'"

package/src/components/qr-code/export.ts

@@ -1,65 +1 @@
-import type { QRCodeExportOptions } from './types'
-
-function dataURL(blob: Blob): Promise<string> {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = () => resolve(reader.result as string)
-    reader.onerror = () => reject(reader.error)
-    reader.readAsDataURL(blob)
-  })
-}
-
-export async function exportQRCode(
-  svg: SVGSVGElement,
-  size: number,
-  { type = 'image/png', scale = 2 }: QRCodeExportOptions = {},
-): Promise<Blob> {
-  const clone = svg.cloneNode(true) as SVGSVGElement
-  const source = [svg, ...svg.querySelectorAll('*')]
-  const target = [clone, ...clone.querySelectorAll('*')]
-  target.forEach((el, index) => {
-    const style = getComputedStyle(source[index]!)
-    el.removeAttribute('class')
-    el.removeAttribute('style')
-    el.setAttribute('fill', style.fill)
-  })
-  clone.setAttribute('xmlns', 'http://www.w3.org/2000/svg')
-  clone.setAttribute('width', String(size))
-  clone.setAttribute('height', String(size))
-  for (const image of clone.querySelectorAll('image')) {
-    const href = image.getAttribute('href')
-    if (!href) continue
-    let embedded = href
-    if (!href.startsWith('data:')) {
-      const response = await fetch(new URL(href, svg.ownerDocument.baseURI))
-      if (!response.ok) throw new Error('Unable to export the QR code logo')
-      embedded = await dataURL(await response.blob())
-    }
-    const decoded = new Image()
-    decoded.src = embedded
-    await decoded.decode()
-    image.setAttribute('href', embedded)
-  }
-  const blob = new Blob([new XMLSerializer().serializeToString(clone)], { type: 'image/svg+xml' })
-  if (type === 'image/svg+xml') return blob
-  const url = URL.createObjectURL(blob)
-  try {
-    const image = new Image()
-    image.src = url
-    await image.decode()
-    const factor = Number.isFinite(scale) ? Math.max(1, Math.min(8, scale)) : 2
-    const canvas = svg.ownerDocument.createElement('canvas')
-    canvas.width = canvas.height = Math.min(8192, Math.round(size * factor))
-    const context = canvas.getContext('2d')
-    if (!context) throw new Error('Canvas is unavailable')
-    context.drawImage(image, 0, 0, canvas.width, canvas.height)
-    return await new Promise<Blob>((resolve, reject) => {
-      canvas.toBlob(
-        result => (result ? resolve(result) : reject(new Error('Unable to export the QR code'))),
-        'image/png',
-      )
-    })
-  } finally {
-    URL.revokeObjectURL(url)
-  }
-}
+export * from '../../../../shared/src/lib/qr-code-export'

package/src/components/range-calendar/utils/limit.ts

@@ -1,11 +1 @@
-import type { DateValue } from '@internationalized/date'
-
-export function maximumDaysMatcher(
-  start: DateValue | undefined,
-  end: DateValue | undefined,
-  maximumDays: number | undefined,
-) {
-  if (!start || end || !maximumDays) return undefined
-  const reach = maximumDays - 1
-  return (date: DateValue) => Math.abs(date.compare(start)) > reach
-}
+export * from '../../../../../shared/src/lib/range-calendar/limit'

package/src/components/rating/utils/fill.ts

@@ -1,4 +1 @@
-export function starFill(value: number, index: number) {
-  const portion = Math.min(Math.max(value - (index - 1), 0), 1)
-  return `${Math.round(portion * 1000) / 10}%`
-}
+export * from '../../../../../shared/src/lib/rating'