@hina-ui/vue 1.7.3 → 1.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hina-ui/vue",
-  "version": "1.7.3",
+  "version": "1.7.4",
   "description": "An elegant, restrained Vue 3 component library built on Reka UI and Tailwind CSS v4.",
   "keywords": [
     "vue",
@@ -24,13 +24,13 @@
     "**/*.css"
   ],
   "module": "./dist/index.js",
-  "types": "./dist/types/index.d.ts",
+  "types": "./dist/types/vue/src/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
+      "types": "./dist/types/vue/src/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./styles/tokens.css": "./src/styles/tokens.css",
+    "./styles/tokens.css": "./dist/styles/tokens.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -42,7 +42,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "vite build && vue-tsc -p tsconfig.build.json",
+    "build": "vite build && vue-tsc -p tsconfig.build.json && node ../../scripts/package-shared.mjs",
     "typecheck": "vue-tsc --noEmit -p tsconfig.json",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -55,12 +55,14 @@
     "@tanstack/vue-virtual": "^3.13.36",
     "@vueuse/core": "^12.8.2",
     "clsx": "^2.1.1",
+    "embla-carousel": "8.6.0",
     "motion-v": "^2.2.1",
-    "overlayscrollbars": "^2.16.0",
+    "overlayscrollbars": "2.16.0",
     "reka-ui": "^2.9.10",
     "shiki": "4.0.2",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.3.1",
+    "uqr": "0.1.3",
     "vue-component-type-helpers": "^3.3.11"
   },
   "peerDependencies": {
@@ -68,6 +70,7 @@
   },
   "devDependencies": {
     "@floating-ui/dom": "1.7.6",
+    "@hina-ui/shared": "workspace:*",
     "@tailwindcss/vite": "^4.3.0",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitest/browser": "^4.1.11",
@@ -75,6 +78,7 @@
     "@vue/test-utils": "^2.4.10",
     "axe-core": "^4.13.0",
     "happy-dom": "^20.9.0",
+    "jsqr": "1.4.0",
     "playwright": "^1.62.1",
     "tailwindcss": "^4.3.0",
     "typescript": "^5.8.0",

package/src/components/accordion/AccordionContent.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
   import { AccordionContent as RekaAccordionContent } from 'reka-ui'
   import { cn } from '../../lib/cn'
+  import { rekaAccordionStyle } from '../../lib/reka/styles'
   import { useCollapseGap } from '../../lib/collapse'
   import { accordionContent } from './accordion.variants'
 
@@ -12,7 +13,11 @@
 </script>
 
 <template>
-  <RekaAccordionContent ref="content" :class="cn(accordionContent(), props.class)">
+  <RekaAccordionContent
+    ref="content"
+    :class="cn(accordionContent(), props.class)"
+    :style="rekaAccordionStyle"
+  >
     <div class="pb-4">
       <slot />
     </div>

package/src/components/accordion/accordion.variants.ts

@@ -1,19 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const accordion = tv({
-  base: 'divide-line flex flex-col divide-y',
-})
-
-export const accordionTrigger = tv({
-  base: [
-    'group/hn-disclosure hn-interactive hn-state-layer hn-press-none',
-    'text-fg -mx-3 flex w-[calc(100%+--spacing(6))] items-center justify-between gap-3 rounded-md px-3 py-3 text-start text-base font-medium',
-    'disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4',
-  ],
-})
-
-export const accordionContent = tv({
-  base: 'hn-anim-collapse [--hn-collapse-h:var(--reka-accordion-content-height)]',
-})
-
-export type AccordionVariants = VariantProps<typeof accordion>
+export * from '../../../../shared/src/variants/accordion'

package/src/components/affix/Affix.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import { affix } from './affix.variants'
+  import { useAffix } from './composables/useAffix'
+  import type { AffixProps, AffixSlotProps } from './types'
+
+  defineOptions({ name: 'HnAffix' })
+  const props = withDefaults(defineProps<AffixProps>(), { as: 'div', position: 'top', offset: 0 })
+  const emit = defineEmits<{ change: [affixed: boolean] }>()
+  defineSlots<{ default?(props: AffixSlotProps): unknown }>()
+  const { element, affixed, offset, update } = useAffix(props, value => emit('change', value))
+  defineExpose({ element, affixed, update })
+</script>
+
+<template>
+  <component
+    :is="props.as"
+    ref="element"
+    data-hn-affix
+    :data-position="props.position"
+    :data-affixed="affixed ? '' : undefined"
+    :data-disabled="props.disabled ? '' : undefined"
+    :class="cn(affix({ position: props.position, disabled: props.disabled }), props.class)"
+    :style="{ '--hn-affix-offset': `${offset}px` }"
+  >
+    <slot :affixed="affixed" />
+  </component>
+</template>

package/src/components/affix/affix.variants.ts

@@ -0,0 +1 @@
+export { affix } from '../../../../shared/src/variants/affix'

package/src/components/affix/composables/useAffix.ts

@@ -0,0 +1,127 @@
+import { computed, onBeforeUnmount, onMounted, onUpdated, shallowRef, watch } from 'vue'
+import type { AffixProps } from '../types'
+
+export function useAffix(props: AffixProps, onChange: (affixed: boolean) => void) {
+  const element = shallowRef<HTMLElement>()
+  const affixed = shallowRef(false)
+  const offset = computed(() => (Number.isFinite(props.offset) ? props.offset! : 0))
+  let mounted = false
+  let frame = 0
+  let cleanup: (() => void) | undefined
+  let scrollport: HTMLElement | undefined
+
+  function findScrollport(el: HTMLElement) {
+    const view = el.ownerDocument.defaultView!
+    let parent = el.parentElement
+    while (
+      parent &&
+      parent !== el.ownerDocument.documentElement &&
+      parent !== el.ownerDocument.body
+    ) {
+      if (/^(auto|scroll|hidden|overlay)$/.test(view.getComputedStyle(parent).overflowY))
+        return parent
+      parent = parent.parentElement
+    }
+    return undefined
+  }
+
+  function setAffixed(value: boolean) {
+    if (value === affixed.value) return
+    affixed.value = value
+    onChange(value)
+  }
+
+  function measure() {
+    frame = 0
+    const el = element.value
+    const view = el?.ownerDocument.defaultView
+    if (!el || !view || props.disabled || !el.getClientRects().length) {
+      setAffixed(false)
+      return
+    }
+    if (findScrollport(el) !== scrollport) {
+      connect()
+      return
+    }
+    const box = el.getBoundingClientRect()
+    const port = scrollport?.getBoundingClientRect()
+    const scale = scrollport?.offsetHeight ? port!.height / scrollport.offsetHeight : 1
+    const top = port ? port.top + scrollport!.clientTop * scale : 0
+    const height = scrollport
+      ? scrollport.clientHeight * scale
+      : el.ownerDocument.documentElement.clientHeight
+    const edge =
+      props.position === 'bottom' ? top + height - offset.value * scale : top + offset.value * scale
+    const actual = props.position === 'bottom' ? box.bottom : box.top
+    setAffixed(
+      box.width > 0 &&
+        box.height > 0 &&
+        height > 0 &&
+        view.getComputedStyle(el).position === 'sticky' &&
+        Math.abs(actual - edge) < 1,
+    )
+  }
+
+  function update() {
+    const view = element.value?.ownerDocument.defaultView
+    if (mounted && view && !frame) frame = view.requestAnimationFrame(measure)
+  }
+
+  function connect() {
+    cleanup?.()
+    cleanup = undefined
+    scrollport = undefined
+    const el = element.value
+    const view = el?.ownerDocument.defaultView
+    if (!mounted || !el || !view) return
+    if (props.disabled) {
+      setAffixed(false)
+      return
+    }
+    scrollport = findScrollport(el)
+    const resize = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(update)
+    resize?.observe(el)
+    if (el.parentElement) resize?.observe(el.parentElement)
+    if (scrollport && scrollport !== el.parentElement) resize?.observe(scrollport)
+    const margin = `${-(Math.max(0, offset.value) + 1)}px`
+    const intersection =
+      typeof IntersectionObserver === 'undefined'
+        ? undefined
+        : new IntersectionObserver(update, {
+            root: scrollport ?? null,
+            rootMargin:
+              props.position === 'bottom' ? `0px 0px ${margin} 0px` : `${margin} 0px 0px 0px`,
+            threshold: [0, 1],
+          })
+    intersection?.observe(el)
+    const onScroll = (event: Event) => {
+      if (
+        event.target === el.ownerDocument ||
+        (event.target instanceof Element && event.target.contains(el))
+      )
+        update()
+    }
+    el.ownerDocument.addEventListener('scroll', onScroll, { passive: true, capture: true })
+    view.addEventListener('resize', update, { passive: true })
+    cleanup = () => {
+      el.ownerDocument.removeEventListener('scroll', onScroll, true)
+      view.removeEventListener('resize', update)
+      resize?.disconnect()
+      intersection?.disconnect()
+    }
+    update()
+  }
+
+  onMounted(() => {
+    mounted = true
+    connect()
+  })
+  watch(() => [props.position, offset.value, props.disabled, props.as], connect, { flush: 'post' })
+  onUpdated(update)
+  onBeforeUnmount(() => {
+    mounted = false
+    cleanup?.()
+    if (frame) element.value?.ownerDocument.defaultView?.cancelAnimationFrame(frame)
+  })
+  return { element, affixed, offset, update }
+}

package/src/components/affix/types.ts

@@ -0,0 +1,17 @@
+export interface AffixProps {
+  as?: string
+  position?: 'top' | 'bottom'
+  offset?: number
+  disabled?: boolean
+  class?: string
+}
+
+export interface AffixSlotProps {
+  affixed: boolean
+}
+
+export interface AffixExpose {
+  element: HTMLElement | undefined
+  affixed: boolean
+  update: () => void
+}

package/src/components/alert-dialog/alert-dialog.variants.ts

@@ -1,17 +1 @@
-import { tv } from '../../lib/tv'
-
-export const alertDialogHeader = tv({
-  base: 'flex min-w-0 flex-col gap-1.5 px-(--hn-panel-p)',
-})
-
-export const alertDialogContent = tv({
-  base: 'px-(--hn-panel-p)',
-})
-
-export const alertDialogActions = tv({
-  base: 'flex justify-end gap-(--hn-inline-gap) px-(--hn-panel-p)',
-})
-
-export const alertDialogCountdown = tv({
-  base: 'tabular-nums',
-})
+export * from '../../../../shared/src/variants/alert-dialog'

package/src/components/anchor/Anchor.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts" generic="T extends AnchorItem = AnchorItem">
+  import { useTemplateRef, watch } from 'vue'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
   import Highlight from '../highlight/Highlight.vue'
   import { useAnchor } from './composables/useAnchor'
+  import { useAnchorFollow } from './composables/useAnchorFollow'
   import type { AnchorItem, AnchorSlotItem } from './types'
 
   export type { AnchorItem } from './types'
@@ -12,9 +14,12 @@
   const props = defineProps<{
     items: T[]
     label?: string
+    autoScroll?: boolean
     class?: string
   }>()
 
+  const emit = defineEmits<{ change: [current: string | undefined] }>()
+
   defineSlots<{
     trailing?(props: { item: AnchorSlotItem<T>; active: boolean }): unknown
   }>()
@@ -22,10 +27,14 @@
   const t = useUiLocale()
 
   const { entries, visible, current, span, jump } = useAnchor(() => props.items)
+  const root = useTemplateRef<HTMLElement>('root')
+  useAnchorFollow(root, current, () => props.autoScroll !== false)
+  watch(current, id => emit('change', id), { flush: 'post' })
+  defineExpose({ current })
 </script>
 
 <template>
-  <nav :aria-label="props.label ?? t.anchor.navLabel" :class="cn(props.class)">
+  <nav ref="root" :aria-label="props.label ?? t.anchor.navLabel" :class="cn(props.class)">
     <ul class="border-line relative grid grid-cols-1 border-s">
       <Transition
         enter-active-class="hn-transition-base"

package/src/components/anchor/composables/useAnchorFollow.ts

@@ -0,0 +1,100 @@
+import { useResizeObserver } from '@vueuse/core'
+import { onBeforeUnmount, onMounted, shallowRef, watch, type Ref } from 'vue'
+import { prefersReducedMotion } from '../../../motion'
+
+export function useAnchorFollow(
+  root: Readonly<Ref<HTMLElement | null>>,
+  current: Readonly<Ref<string | undefined>>,
+  enabled: () => boolean,
+) {
+  const viewport = shallowRef<HTMLElement>()
+  let mounted = false
+  let frame = 0
+  let lastCurrent: string | undefined
+
+  function findViewport(nav: HTMLElement, target: HTMLElement) {
+    const doc = nav.ownerDocument
+    const view = doc.defaultView!
+    for (
+      let node: HTMLElement | null = nav;
+      node && node !== doc.body && node !== doc.documentElement;
+      node = node.parentElement
+    ) {
+      // A shared page/content scroller is not the directory's own viewport.
+      if (node.contains(target)) break
+      if (/^(auto|scroll|overlay)$/.test(view.getComputedStyle(node).overflowY)) return node
+    }
+  }
+
+  function follow() {
+    frame = 0
+    const nav = root.value
+    const id = current.value
+    if (!enabled() || !nav || !id) return
+    const target = nav.ownerDocument.getElementById(id)
+    const link = nav.querySelector<HTMLElement>('a[aria-current="location"]')
+    if (!target || !link || !link.getClientRects().length) return
+    const port = findViewport(nav, target)
+    viewport.value = port
+    const changed = lastCurrent !== undefined && lastCurrent !== id
+    lastCurrent = id
+    if (!port || port.clientHeight <= 0 || port.scrollHeight <= port.clientHeight) return
+
+    const box = port.getBoundingClientRect()
+    const row = link.getBoundingClientRect()
+    const scale = port.offsetHeight ? box.height / port.offsetHeight : 1
+    if (scale <= 0) return
+    const top = box.top + port.clientTop * scale
+    const bottom = top + port.clientHeight * scale
+    if (row.top >= top && row.bottom <= bottom) return
+    // A wrapped item taller than the viewport cannot be fully visible. Avoid
+    // alternating between its top and bottom when resize observers run again.
+    if (row.top <= top && row.bottom >= bottom) return
+
+    const style = port.ownerDocument.defaultView!.getComputedStyle(port)
+    const margin = Math.min(row.height / scale / 2, port.clientHeight / 4)
+    const padding = (value: string) =>
+      Math.min(
+        Math.max(0, (port.clientHeight - row.height / scale) / 2),
+        value === 'auto'
+          ? margin
+          : (parseFloat(value) || 0) * (value.endsWith('%') ? port.clientHeight / 100 : 1),
+      )
+    const before = padding(style.scrollPaddingTop)
+    const after = padding(style.scrollPaddingBottom)
+    const delta =
+      row.height > bottom - top || row.top < top
+        ? (row.top - top) / scale - before
+        : (row.bottom - bottom) / scale + after
+    const next = Math.max(
+      0,
+      Math.min(port.scrollHeight - port.clientHeight, port.scrollTop + delta),
+    )
+    if (Math.abs(next - port.scrollTop) < 1) return
+    port.scrollTo({
+      top: next,
+      behavior: changed && !prefersReducedMotion() ? 'smooth' : 'instant',
+    })
+  }
+
+  function schedule() {
+    if (mounted && !frame) frame = requestAnimationFrame(follow)
+  }
+
+  watch([root, current, enabled], schedule, { flush: 'post' })
+  useResizeObserver(
+    () =>
+      [root.value, root.value?.parentElement, viewport.value].filter(
+        (el): el is HTMLElement => !!el,
+      ),
+    schedule,
+  )
+  onMounted(() => {
+    mounted = true
+    schedule()
+  })
+  onBeforeUnmount(() => {
+    mounted = false
+    cancelAnimationFrame(frame)
+  })
+}

package/src/components/app-shell/AppShell.vue

@@ -28,6 +28,7 @@
   const sidebar = defineModel<SidebarState>('sidebar', { default: 'expanded' })
   const mobileOpen = defineModel<boolean>('mobileOpen', { default: false })
   const main = shallowRef<InstanceType<typeof ScrollArea>>()
+  const emit = defineEmits<{ sizeStable: [] }>()
 
   defineExpose({
     mainViewport: computed(() => main.value?.viewport),
@@ -35,7 +36,10 @@
   })
 
   const isDesktop = useDesktopQuery()
-  const onTransitionRun = useSidebarScrollUpdates(main)
+  const onTransitionRun = useSidebarScrollUpdates(
+    () => sidebar.value,
+    () => emit('sizeStable'),
+  )
 
   function toggle() {
     if (!isDesktop.value) {

package/src/components/app-shell/composables/useSidebarScrollUpdates.ts

@@ -1,52 +1,75 @@
-import { onBeforeUnmount, shallowRef, watch, type Ref } from 'vue'
-import type { OverlayScrollbars } from 'overlayscrollbars'
-import type ScrollArea from '../../scroll-area/ScrollArea.vue'
+import { nextTick, onBeforeUnmount, shallowRef, watch } from 'vue'
+import { provideLayoutTransition } from '../../../lib/layout-stability'
 
-export function useSidebarScrollUpdates(
-  area: Readonly<Ref<InstanceType<typeof ScrollArea> | undefined>>,
-) {
+export function useSidebarScrollUpdates(state: () => string, settled: () => void) {
   const transitioning = shallowRef(false)
-  let paused: OverlayScrollbars | undefined
+  provideLayoutTransition(transitioning)
   let revision = 0
+  let frame = 0
+  let target: HTMLElement | undefined
+  let running = false
+  let pendingRun = false
 
-  function resume() {
-    const instance = paused
-    paused = undefined
-    if (instance && !instance.state().destroyed) instance.sleep(false)
+  function check() {
+    frame = 0
+    if (target && !target.isConnected) running = false
+    if (running || pendingRun) {
+      pendingRun = false
+      frame = requestAnimationFrame(check)
+      return
+    }
+    const current = revision
+    release()
+    transitioning.value = false
+    void nextTick(() => {
+      if (current === revision) settled()
+    })
+  }
+
+  function schedule() {
+    if (!frame) frame = requestAnimationFrame(check)
+  }
+
+  function stop(event: TransitionEvent) {
+    if (event.target !== target || event.propertyName !== 'width') return
+    running = false
+    pendingRun = false
+    schedule()
+  }
+
+  function release() {
+    target?.removeEventListener('transitionend', stop)
+    target?.removeEventListener('transitioncancel', stop)
+    target = undefined
   }
 
-  const stop = watch(
-    [() => area.value?.instance, transitioning],
-    ([instance, active]) => {
-      if (active && instance === paused) return
-      resume()
-      if (active && instance && !instance.state().sleeping && !instance.state().destroyed) {
-        paused = instance
-        instance.sleep(true)
-      }
+  watch(
+    state,
+    () => {
+      revision++
+      transitioning.value = true
+      pendingRun = true
+      schedule()
     },
     { flush: 'sync' },
   )
 
   onBeforeUnmount(() => {
     revision++
-    stop()
-    resume()
+    cancelAnimationFrame(frame)
+    release()
   })
 
   return (event: TransitionEvent) => {
     if (event.target !== event.currentTarget || event.propertyName !== 'width') return
-    const target = event.currentTarget as HTMLElement
-    const animations = target
-      .getAnimations()
-      .filter(
-        animation => animation instanceof CSSTransition && animation.transitionProperty === 'width',
-      )
-    if (!animations.length) return
-    const current = ++revision
+    if (target !== event.currentTarget) {
+      release()
+      target = event.currentTarget as HTMLElement
+      target.addEventListener('transitionend', stop)
+      target.addEventListener('transitioncancel', stop)
+    }
+    running = true
     transitioning.value = true
-    void Promise.allSettled(animations.map(animation => animation.finished)).then(() => {
-      if (current === revision) transitioning.value = false
-    })
+    schedule()
   }
 }