@hina-ui/vue 1.7.5 → 1.7.7

package/src/components/form/standard-schema.ts

@@ -1,26 +1 @@
-export interface StandardSchemaIssue {
-  message: string
-  path?: ReadonlyArray<PropertyKey | { key: PropertyKey }>
-}
-
-export interface StandardSchemaResult {
-  value?: unknown
-  issues?: ReadonlyArray<StandardSchemaIssue>
-}
-
-export interface StandardSchema {
-  '~standard': {
-    version: 1
-    vendor: string
-    validate: (value: unknown) => StandardSchemaResult | Promise<StandardSchemaResult>
-  }
-}
-
-export type FormValues = Record<string, unknown>
-export type FormErrors = Record<string, string>
-export type FormValidator = (values: FormValues) => FormErrors | Promise<FormErrors>
-export type FormRules = StandardSchema | FormValidator
-
-export function isStandardSchema(rules: FormRules): rules is StandardSchema {
-  return typeof rules === 'object' && rules !== null && '~standard' in rules
-}
+export * from '../../../../shared/src/lib/form/standard-schema'

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

@@ -1,48 +1 @@
-import {
-  isStandardSchema,
-  type FormErrors,
-  type FormRules,
-  type FormValues,
-  type StandardSchemaIssue,
-} from '../standard-schema'
-
-export const ROOT = ''
-
-export function issueKey(issue: StandardSchemaIssue) {
-  return (issue.path ?? [])
-    .map(part => String(typeof part === 'object' && part !== null ? part.key : part))
-    .join('.')
-}
-
-export function issuesToErrors(issues: ReadonlyArray<StandardSchemaIssue>): FormErrors {
-  const errors: FormErrors = {}
-  for (const issue of issues) {
-    const key = issueKey(issue)
-    if (!(key in errors)) errors[key] = issue.message
-  }
-  return errors
-}
-
-export function readPath(values: FormValues, key: string): unknown {
-  return key
-    .split('.')
-    .reduce<unknown>(
-      (current, part) =>
-        current && typeof current === 'object'
-          ? (current as Record<string, unknown>)[part]
-          : undefined,
-      values,
-    )
-}
-
-export async function runRules(
-  rules: FormRules | undefined,
-  values: FormValues,
-): Promise<FormErrors> {
-  if (!rules) return {}
-  if (isStandardSchema(rules)) {
-    const result = await rules['~standard'].validate(values)
-    return result.issues ? issuesToErrors(result.issues) : {}
-  }
-  return await rules(values)
-}
+export * from '../../../../../shared/src/lib/form/errors'

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

@@ -1,10 +1 @@
-const FOCUSABLE = 'input,select,textarea,button,[tabindex],[contenteditable="true"]'
-
-export function focusFirstInvalid(root: HTMLElement) {
-  const invalid = root.querySelector<HTMLElement>('[aria-invalid="true"]')
-  if (!invalid) return
-  const target = invalid.matches(FOCUSABLE)
-    ? invalid
-    : invalid.querySelector<HTMLElement>(FOCUSABLE)
-  target?.focus()
-}
+export * from '../../../../../shared/src/lib/form/focus'

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/heading/Heading.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
   import { computed } from 'vue'
-  import { Primitive } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { heading, type HeadingVariants } from './heading.variants'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnHeading' })
 

package/src/components/icon-button/IconButton.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-  import { injectTooltipProviderContext, type PrimitiveProps } from 'reka-ui'
+  import { injectTooltipProviderContext } from 'reka-ui'
   import Button from '../button/Button.vue'
   import Tooltip from '../tooltip/Tooltip.vue'
   import { Passthrough } from '../../lib/passthrough'
   import type { ButtonVariants } from '../button/button.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnIconButton', inheritAttrs: false })
 

package/src/components/image/Image.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
   import { computed, onBeforeUnmount, shallowRef, useId, watch, type StyleValue } from 'vue'
-  import { Primitive } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { useRequiredLabel } from '../../lib/a11y'
   import Skeleton from '../skeleton/Skeleton.vue'
@@ -10,6 +9,7 @@
   import { useImage } from './composables/useImage'
   import { useImageGroup } from './context'
   import { useImageResolver } from './resolver'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnImage', inheritAttrs: false })
 

package/src/components/indicator/Indicator.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import VisuallyHidden from '../visually-hidden/VisuallyHidden.vue'
   import { cn } from '../../lib/cn'
   import { indicator, type IndicatorVariants } from './indicator.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnIndicator' })
 

package/src/components/input/InputAction.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-  import { Primitive } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { inputAction, inputAdornment } from './input.variants'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnInputAction' })
 

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'