@hina-ui/vue 1.3.0 → 1.3.1

package/src/components/image/image.variants.ts

@@ -1,8 +1,20 @@
 import { tv, type VariantProps } from '../../lib/tv'
 
+export const imageRoot = tv({
+  base: 'relative block w-full overflow-hidden',
+  variants: {
+    preview: {
+      true: 'hn-focus-ring cursor-zoom-in',
+    },
+  },
+})
+
 export const image = tv({
-  base: 'block size-full',
+  base: 'relative z-10 block size-full',
   variants: {
+    lazy: {
+      true: 'transition-opacity duration-(--hn-duration-base) ease-enter motion-reduce:transition-none',
+    },
     fit: {
       cover: 'object-cover',
       contain: 'object-contain',

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

@@ -84,7 +84,9 @@ export function useLightboxMotion(stageHeight: () => number, restScale: () => nu
   function leave(to: Pose | null): Promise<void> {
     stop()
     const t = to ? timing(RETURN_SPRING) : transition('exit')
-    const travel = to ? poseTo(to, t) : [animate(scale, FADE_POSE.scale, t), animate(opacity, 0, t)]
+    const travel = to
+      ? poseTo(to, t)
+      : [animate(scale, Math.min(scale.get(), FADE_POSE.scale), t), animate(opacity, 0, t)]
     return settle([...travel, animate(presence, 0, t)])
   }
 

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

@@ -1,5 +1,6 @@
 import type { useLightboxFrames } from './useLightboxFrames'
-import { openPose, radiusOf, type Pose, type Rect } from '../utils/pose'
+import { openPose, type Pose, type Rect } from '../utils/pose'
+import { clipOf } from '../utils/clip'
 import type { LightboxItem } from '../types'
 
 export function useLightboxPose(
@@ -28,7 +29,9 @@ export function useLightboxPose(
     const box = sourceBox()
     const natural = frames.naturalOf(item)
     if (!box || !natural) return null
-    return openPose(frames.frameOf(item), box, natural, item?.fit, radiusOf(item?.source?.()))
+    const clip = clipOf(item?.source?.(), 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)
   }
 
   return { fromSource }

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
@@ -79,23 +80,40 @@ 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})`,
   }
 }
 
@@ -106,14 +124,6 @@ export function baseScale(frame: Size, stage: Size, rotation: number): number {
   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
-}
-
 export function dismissProgress(offsetY: number, stageHeight: number): number {
   if (stageHeight <= 0) return 0
   return Math.min(1, Math.max(0, offsetY) / (stageHeight * DISMISS_TRAVEL))

package/src/components/popover/Popover.vue

@@ -4,6 +4,7 @@
   import PopoverContent from './PopoverContent.vue'
   import { useAnchoredOverlay } from '../../lib/anchored-overlay'
   import Card from '../card/Card.vue'
+  import { useOverlayPortal } from '../../lib/overlay-portal'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnPopover', inheritAttrs: false })
@@ -28,6 +29,8 @@
     emit('openAutoFocus', event),
   )
 
+  const { content, present } = useOverlayPortal(visible)
+
   const pressOrigin = computed(() => {
     if (props.side === 'left') return 'right'
     if (props.side === 'right') return 'left'
@@ -41,13 +44,13 @@
   <PopoverRoot v-model:open="visible" :modal="props.modal">
     <PopoverTrigger
       v-if="$slots.default"
-      ref="trigger"
+      :ref="trigger"
       as-child
       :style="{ transformOrigin: pressOrigin }"
     >
       <slot />
     </PopoverTrigger>
-    <PopoverPortal>
+    <PopoverPortal v-if="present">
       <PopoverContent
         v-bind="{ ...$attrs, ...events }"
         :reference="reference"
@@ -57,6 +60,7 @@
         :side-offset="props.sideOffset"
       >
         <Card
+          ref="content"
           :padded="props.padded"
           :class="cn('hn-anim-pop z-(--hn-z-overlay) max-w-sm shadow-md outline-none', props.class)"
         >

package/src/components/scroll-area/composables/useLayerLock.ts

@@ -13,10 +13,6 @@ const useBodyPointerLock = createSharedComposable(() => {
   return locked
 })
 
-function block(event: Event) {
-  event.preventDefault()
-}
-
 export function useLayerLock(viewport: ShallowRef<HTMLElement | undefined>) {
   const locked = useBodyPointerLock()
   let release: (() => void) | undefined
@@ -25,12 +21,15 @@ export function useLayerLock(viewport: ShallowRef<HTMLElement | undefined>) {
     release?.()
     release = undefined
     const el = viewport.value
-    if (!el || !locked.value || getComputedStyle(el).pointerEvents !== 'none') return
-    el.addEventListener('wheel', block, { passive: false })
-    el.addEventListener('touchmove', block, { passive: false })
+    if (!el || !locked.value) return
+    const block = (event: Event) => {
+      if (getComputedStyle(el).pointerEvents === 'none') event.preventDefault()
+    }
+    el.addEventListener('wheel', block, { passive: false, capture: true })
+    el.addEventListener('touchmove', block, { passive: false, capture: true })
     release = () => {
-      el.removeEventListener('wheel', block)
-      el.removeEventListener('touchmove', block)
+      el.removeEventListener('wheel', block, true)
+      el.removeEventListener('touchmove', block, true)
     }
   }
 

package/src/components/scroll-area/composables/useWheelRedirect.ts

@@ -5,7 +5,7 @@ export function useWheelRedirect(
   enabled: () => boolean,
 ) {
   function onWheel(event: WheelEvent) {
-    if (!enabled()) return
+    if (event.defaultPrevented || !enabled()) return
     const el = viewport.value
     if (!el) return
     if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return

package/src/components/skeleton/LICENSE

@@ -0,0 +1,24 @@
+The skeleton shimmer styles and light/dark opacity values are adapted from PrimeVue / PrimeUIX
+(https://github.com/primefaces/primeuix), using Hina design tokens.
+
+MIT License
+
+Copyright (c) 2025 PrimeTek
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/src/index.ts

@@ -227,6 +227,8 @@ export { default as Spoiler } from './components/spoiler/Spoiler.vue'
 export { default as Skeleton } from './components/skeleton/Skeleton.vue'
 export { default as Image } from './components/image/Image.vue'
 export { default as ImageGroup } from './components/image/ImageGroup.vue'
+export { default as Lightbox } from './components/lightbox/Lightbox.vue'
+export type { LightboxItem } from './components/lightbox/types'
 export { provideImageResolver, useImageResolver } from './components/image/resolver'
 export type { ImageResolver } from './components/image/resolver'
 export type { ImageVariants } from './components/image/image.variants'

package/src/lib/anchored-overlay.ts

@@ -1,5 +1,5 @@
 import { computed, nextTick, shallowRef, watch, type Ref } from 'vue'
-import type { DropdownMenuContentEmits } from 'reka-ui'
+import { useForwardExpose, type DropdownMenuContentEmits } from 'reka-ui'
 
 export function useAnchoredOverlay(
   props: { anchor?: HTMLElement | null; modal: boolean },
@@ -10,10 +10,7 @@ export function useAnchoredOverlay(
   ) => void,
   openAutoFocus?: (event: Event) => void,
 ) {
-  const trigger = shallowRef<{ $el: HTMLElement } | null>(null)
-  const triggerElement = computed(() =>
-    trigger.value?.$el?.nodeType === 1 ? trigger.value.$el : undefined,
-  )
+  const { forwardRef: trigger, currentElement: triggerElement } = useForwardExpose()
   const retainedAnchor = shallowRef<HTMLElement>()
   const reference = computed(
     () =>

package/src/lib/dialog-focus.ts

@@ -0,0 +1,13 @@
+import { injectDialogRootContext } from 'reka-ui'
+
+export function useDialogCloseFocus(onCloseAutoFocus: (event: Event) => void) {
+  const context = injectDialogRootContext()
+
+  return (event: Event) => {
+    onCloseAutoFocus(event)
+    if (event.defaultPrevented) return
+    event.preventDefault()
+    const target = context.triggerElement.value
+    if (target?.isConnected) target.focus({ preventScroll: true })
+  }
+}

package/src/lib/overlay-portal.ts

@@ -0,0 +1,8 @@
+import { computed, shallowRef, type ComponentPublicInstance, type Ref } from 'vue'
+
+export function useOverlayPortal(open: Ref<boolean | undefined>) {
+  const content = shallowRef<ComponentPublicInstance | null>(null)
+  const present = computed(() => !!open.value || !!content.value)
+
+  return { content, present }
+}

package/src/styles/interaction.css

@@ -266,20 +266,43 @@
 }
 
 @utility hn-skeleton {
-  background-color: var(--hn-bg-subtle);
+  position: relative;
+  overflow: hidden;
+  background-color: var(--hn-skeleton-bg);
   border-radius: var(--hn-radius-md);
   color: transparent;
   cursor: default;
   pointer-events: none;
   user-select: none;
-  animation: hn-skeleton var(--hn-skeleton-duration) var(--hn-ease-move) infinite;
+
+  &::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    transform: translateX(-100%);
+    background: linear-gradient(
+      90deg,
+      rgb(255 255 255 / 0),
+      var(--hn-skeleton-wave),
+      rgb(255 255 255 / 0)
+    );
+    animation: hn-skeleton var(--hn-skeleton-duration) var(--hn-ease-move) infinite;
+  }
+
+  &:dir(rtl)::after {
+    animation-name: hn-skeleton-rtl;
+  }
 
   & * {
     visibility: hidden;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    animation: none;
+    &::after,
+    &:dir(rtl)::after {
+      animation: none;
+    }
   }
 }
 

package/src/styles/motion.css

@@ -5,8 +5,20 @@
 }
 
 @keyframes hn-skeleton {
-  50% {
-    background-color: var(--hn-bg-inset);
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes hn-skeleton-rtl {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(-100%);
   }
 }
 

package/src/styles/semantic.css

@@ -72,6 +72,8 @@
     0 40px 80px -24px rgb(0 0 0 / 0.16);
 
   --hn-scroll-shadow: rgb(0 0 0 / 0.1);
+  --hn-skeleton-bg: var(--color-neutral-200);
+  --hn-skeleton-wave: rgb(255 255 255 / 0.4);
 
   --hn-z-overlay: 100;
   --hn-z-toast: 110;
@@ -146,6 +148,8 @@
     0 32px 64px -16px rgb(0 0 0 / 0.55);
 
   --hn-scroll-shadow: rgb(0 0 0 / 0.5);
+  --hn-skeleton-bg: rgb(255 255 255 / 0.06);
+  --hn-skeleton-wave: rgb(255 255 255 / 0.04);
 }
 
 :root {
@@ -202,7 +206,7 @@
   --hn-travel-md: 10px;
   --hn-stagger: 24ms;
   --hn-spin-duration: 700ms;
-  --hn-skeleton-duration: 2200ms;
+  --hn-skeleton-duration: 1200ms;
   --hn-ripple-in: 75ms;
   --hn-ripple-out: 375ms;
   --hn-pulse-duration: 1500ms;