@hina-ui/vue 1.0.0

package/src/components/ring-progress/ring-progress.variants.ts

@@ -0,0 +1,55 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const ringProgress = tv({
+  base: 'inline-flex flex-col items-center gap-1.5',
+})
+
+export const ringProgressRoot = tv({
+  base: 'relative shrink-0',
+  variants: {
+    size: {
+      sm: 'size-10 text-xs',
+      md: 'size-16 text-sm',
+      lg: 'size-24 text-lg',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})
+
+export const ringProgressSvg = tv({
+  base: 'hn-ring-spin size-full -rotate-90',
+})
+
+export const ringProgressTrack = tv({
+  base: 'stroke-line-strong fill-none',
+})
+
+export const ringProgressArc = tv({
+  base: 'hn-ring-arc fill-none',
+  variants: {
+    tone: {
+      accent: 'stroke-accent',
+      neutral: 'stroke-neutral-solid',
+      success: 'stroke-success',
+      warning: 'stroke-warning',
+      danger: 'stroke-danger',
+      info: 'stroke-info',
+    },
+  },
+  defaultVariants: {
+    tone: 'accent',
+  },
+})
+
+export const ringProgressCenter = tv({
+  base: 'text-fg absolute inset-0 flex items-center justify-center tabular-nums',
+})
+
+export const ringProgressLabel = tv({
+  base: 'text-muted text-sm',
+})
+
+export type RingProgressVariants = VariantProps<typeof ringProgressRoot> &
+  VariantProps<typeof ringProgressArc>

package/src/components/ripple/LICENSE

@@ -0,0 +1,9 @@
+Forked from m3-ripple (https://github.com/SaltyAom/m3-ripple), ported from React to Vue.
+
+Copyright 2025 saltyAom
+
+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/components/ripple/Ripple.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useRipple } from './useRipple'
+
+  defineOptions({ name: 'HnRipple' })
+
+  const props = defineProps<{ disabled?: boolean }>()
+
+  const container = ref<HTMLElement | null>(null)
+  const surface = ref<HTMLElement | null>(null)
+
+  const { pressed } = useRipple(container, surface, () => !!props.disabled)
+</script>
+
+<template>
+  <div ref="container" aria-hidden="true" class="hn-ripple">
+    <div ref="surface" class="hn-ripple-surface" :data-pressed="pressed ? '' : undefined"></div>
+  </div>
+</template>

package/src/components/ripple/useRipple.ts

@@ -0,0 +1,211 @@
+import { onBeforeUnmount, onMounted, ref, type Ref } from 'vue'
+import { prefersReducedMotion } from '../../motion'
+
+const INITIAL_ORIGIN_SCALE = 0.2
+const PADDING = 12
+const SOFT_EDGE_MINIMUM_SIZE = 75
+const SOFT_EDGE_CONTAINER_RATIO = 0.35
+const GROW_MS = 150
+const MINIMUM_PRESS_MS = 225
+const TOUCH_DELAY_MS = 150
+
+const STATE = {
+  inactive: 0,
+  touchDelay: 1,
+  holding: 2,
+  waitingForClick: 3,
+} as const
+
+type RippleState = (typeof STATE)[keyof typeof STATE]
+
+export function useRipple(
+  container: Ref<HTMLElement | null>,
+  surface: Ref<HTMLElement | null>,
+  isDisabled: () => boolean,
+) {
+  const pressed = ref(false)
+
+  let host: HTMLElement | null = null
+  let state: RippleState = STATE.inactive
+  let startEvent: PointerEvent | undefined
+  let checkBoundsAfterContextMenu = false
+  let growAnimation: Animation | undefined
+  let initialSize = 0
+  let rippleScale = ''
+  let rippleSize = ''
+
+  const isTouch = ({ pointerType }: PointerEvent) => pointerType === 'touch'
+
+  function shouldReact(event: PointerEvent) {
+    if (isDisabled() || !event.isPrimary) return false
+    if (startEvent && startEvent.pointerId !== event.pointerId) return false
+    if (event.type === 'pointerenter' || event.type === 'pointerleave') return !isTouch(event)
+    return isTouch(event) || event.buttons === 1
+  }
+
+  function inBounds({ x, y }: PointerEvent) {
+    const rect = container.value?.getBoundingClientRect()
+    if (!rect) return false
+    return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom
+  }
+
+  function determineRippleSize() {
+    const rect = container.value?.getBoundingClientRect()
+    if (!rect) return
+    const maxDim = Math.max(rect.height, rect.width)
+    const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE)
+    initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE)
+    const maxRadius = Math.hypot(rect.width, rect.height) + PADDING
+    rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`
+    rippleSize = `${initialSize}px`
+  }
+
+  function normalizedCoords(event: PointerEvent) {
+    const rect = container.value?.getBoundingClientRect()
+    if (!rect) return { x: 0, y: 0 }
+    return {
+      x: event.pageX - (window.scrollX + rect.left),
+      y: event.pageY - (window.scrollY + rect.top),
+    }
+  }
+
+  function translationCoords(positionEvent?: PointerEvent) {
+    const rect = container.value?.getBoundingClientRect()
+    if (!rect) return { startPoint: { x: 0, y: 0 }, endPoint: { x: 0, y: 0 } }
+    const endPoint = {
+      x: (rect.width - initialSize) / 2,
+      y: (rect.height - initialSize) / 2,
+    }
+    return {
+      startPoint: positionEvent ? normalizedCoords(positionEvent) : endPoint,
+      endPoint,
+    }
+  }
+
+  function startPress(positionEvent?: PointerEvent) {
+    const el = surface.value
+    if (!el) return
+    pressed.value = true
+    growAnimation?.cancel()
+    growAnimation = undefined
+    determineRippleSize()
+    const { startPoint, endPoint } = translationCoords(positionEvent)
+    if (typeof el.animate !== 'function') return
+    if (prefersReducedMotion()) return
+    growAnimation = el.animate(
+      {
+        height: [rippleSize, rippleSize],
+        width: [rippleSize, rippleSize],
+        transform: [
+          `translate(${startPoint.x}px,${startPoint.y}px) scale(1)`,
+          `translate(${endPoint.x}px,${endPoint.y}px) scale(${rippleScale})`,
+        ],
+      },
+      {
+        pseudoElement: '::after',
+        duration: GROW_MS,
+        easing: 'linear',
+        fill: 'forwards',
+      },
+    )
+    growAnimation.finished.catch(() => {})
+  }
+
+  function endPress() {
+    startEvent = undefined
+    state = STATE.inactive
+    const animation = growAnimation
+    let playedMs = Infinity
+    if (typeof animation?.currentTime === 'number') playedMs = animation.currentTime
+    else if (animation?.currentTime) playedMs = animation.currentTime.to('ms').value
+    if (playedMs >= MINIMUM_PRESS_MS) {
+      pressed.value = false
+      return
+    }
+    window.setTimeout(() => {
+      if (growAnimation !== animation) return
+      pressed.value = false
+    }, MINIMUM_PRESS_MS - playedMs)
+  }
+
+  function onPointerDown(event: PointerEvent) {
+    if (!shouldReact(event)) return
+    startEvent = event
+    if (!isTouch(event)) {
+      state = STATE.waitingForClick
+      startPress(event)
+      return
+    }
+    if (checkBoundsAfterContextMenu && !inBounds(event)) return
+    checkBoundsAfterContextMenu = false
+    state = STATE.touchDelay
+    window.setTimeout(() => {
+      if (state !== STATE.touchDelay) return
+      state = STATE.holding
+      startPress(event)
+    }, TOUCH_DELAY_MS)
+  }
+
+  function onPointerUp(event: PointerEvent) {
+    if (!shouldReact(event)) return
+    if (state === STATE.holding) {
+      state = STATE.waitingForClick
+      return
+    }
+    if (state === STATE.touchDelay) {
+      state = STATE.waitingForClick
+      startPress(startEvent)
+    }
+  }
+
+  function onPointerLeave(event: PointerEvent) {
+    if (!shouldReact(event)) return
+    if (state !== STATE.inactive) endPress()
+  }
+
+  function onPointerCancel(event: PointerEvent) {
+    if (!shouldReact(event)) return
+    endPress()
+  }
+
+  function onClick() {
+    if (isDisabled()) return
+    if (state === STATE.waitingForClick) {
+      endPress()
+      return
+    }
+    if (state === STATE.inactive) {
+      startPress()
+      endPress()
+    }
+  }
+
+  function onContextMenu() {
+    if (isDisabled()) return
+    checkBoundsAfterContextMenu = true
+    endPress()
+  }
+
+  const listeners: [string, EventListener][] = [
+    ['click', onClick as EventListener],
+    ['contextmenu', onContextMenu as EventListener],
+    ['pointercancel', onPointerCancel as EventListener],
+    ['pointerdown', onPointerDown as EventListener],
+    ['pointerleave', onPointerLeave as EventListener],
+    ['pointerup', onPointerUp as EventListener],
+  ]
+
+  onMounted(() => {
+    host = container.value?.parentElement ?? null
+    if (!host) return
+    for (const [name, fn] of listeners) host.addEventListener(name, fn, true)
+  })
+
+  onBeforeUnmount(() => {
+    if (!host) return
+    for (const [name, fn] of listeners) host.removeEventListener(name, fn, true)
+    host = null
+  })
+
+  return { pressed }
+}

package/src/components/scroll-area/ScrollArea.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+  import { computed, shallowRef, watch } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import { useOverlayScrollbars } from './composables/useOverlayScrollbars'
+  import { useEdgeShadow } from './composables/useEdgeShadow'
+  import { useWheelRedirect } from './composables/useWheelRedirect'
+  import { useLayerLock } from './composables/useLayerLock'
+
+  defineOptions({ name: 'HnScrollArea', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      direction?: 'vertical' | 'horizontal' | 'both'
+      autoHide?: 'never' | 'scroll' | 'leave' | 'move'
+      scrollbar?: boolean
+      wheelRedirect?: boolean
+      shadow?: boolean
+      focusable?: boolean
+      label?: string
+      class?: string
+    }>(),
+    {
+      direction: 'vertical',
+      autoHide: 'leave',
+      scrollbar: true,
+      wheelRedirect: true,
+      shadow: true,
+      focusable: false,
+    },
+  )
+
+  const t = useUiLocale()
+  const host = shallowRef<HTMLElement>()
+  const content = shallowRef<HTMLElement>()
+
+  const overflow = {
+    vertical: { x: 'hidden', y: 'scroll' },
+    horizontal: { x: 'scroll', y: 'hidden' },
+    both: { x: 'scroll', y: 'scroll' },
+  } as const
+
+  function options() {
+    return {
+      scrollbars: {
+        theme: 'os-theme-dark',
+        visibility: props.scrollbar ? ('auto' as const) : ('hidden' as const),
+        autoHide: props.autoHide,
+        autoHideDelay: 800,
+      },
+      overflow: overflow[props.direction],
+      update: {
+        elementEvents: [
+          ['img', 'load'],
+          ['*', 'transitionend animationend'],
+        ] as Array<[string, string]>,
+      },
+    }
+  }
+
+  const { viewport, instance, onEvent } = useOverlayScrollbars(host, content, options)
+  const { showXStart, showXEnd, showYStart, showYEnd, updateEdges } = useEdgeShadow(
+    viewport,
+    () => ({ direction: props.direction, shadow: props.shadow }),
+  )
+
+  onEvent('scroll', updateEdges)
+  onEvent('updated', updateEdges)
+  watch(viewport, () => updateEdges())
+
+  useWheelRedirect(viewport, () => props.direction === 'horizontal' && props.wheelRedirect)
+  useLayerLock(viewport)
+
+  watch(
+    () => [props.direction, props.autoHide, props.scrollbar],
+    () => instance.value?.options(options()),
+  )
+
+  defineExpose({ viewport, instance })
+</script>
+
+<template>
+  <div :class="cn('hn-scroll-area relative flex flex-col overflow-hidden', props.class)">
+    <div
+      ref="host"
+      v-bind="$attrs"
+      data-overlayscrollbars-initialize
+      :tabindex="props.focusable ? 0 : undefined"
+      :role="props.focusable ? 'region' : undefined"
+      :aria-label="props.focusable ? (props.label ?? t.scroll.regionLabel) : undefined"
+      class="w-full min-h-0 grow"
+    >
+      <div ref="content" data-overlayscrollbars-contents>
+        <slot />
+      </div>
+    </div>
+    <template v-if="props.shadow">
+      <div
+        v-if="props.direction !== 'vertical'"
+        class="hn-scroll-shadow"
+        data-side="x-start"
+        :data-visible="showXStart ? '' : undefined"
+        aria-hidden="true"
+      />
+      <div
+        v-if="props.direction !== 'vertical'"
+        class="hn-scroll-shadow"
+        data-side="x-end"
+        :data-visible="showXEnd ? '' : undefined"
+        aria-hidden="true"
+      />
+      <div
+        v-if="props.direction !== 'horizontal'"
+        class="hn-scroll-shadow"
+        data-side="y-start"
+        :data-visible="showYStart ? '' : undefined"
+        aria-hidden="true"
+      />
+      <div
+        v-if="props.direction !== 'horizontal'"
+        class="hn-scroll-shadow"
+        data-side="y-end"
+        :data-visible="showYEnd ? '' : undefined"
+        aria-hidden="true"
+      />
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,32 @@
+import { shallowRef, type ShallowRef } from 'vue'
+
+export function useEdgeShadow(
+  viewport: ShallowRef<HTMLElement | undefined>,
+  opts: () => { direction: 'vertical' | 'horizontal' | 'both'; shadow: boolean },
+) {
+  const showXStart = shallowRef(false)
+  const showXEnd = shallowRef(false)
+  const showYStart = shallowRef(false)
+  const showYEnd = shallowRef(false)
+
+  function updateEdges() {
+    const el = viewport.value
+    const { direction, shadow } = opts()
+    if (!el || !shadow) {
+      showXStart.value = false
+      showXEnd.value = false
+      showYStart.value = false
+      showYEnd.value = false
+      return
+    }
+    const room = 1
+    const x = direction !== 'vertical'
+    const y = direction !== 'horizontal'
+    showXStart.value = x && Math.abs(el.scrollLeft) > room
+    showXEnd.value = x && Math.abs(el.scrollLeft) + el.clientWidth < el.scrollWidth - room
+    showYStart.value = y && el.scrollTop > room
+    showYEnd.value = y && el.scrollTop + el.clientHeight < el.scrollHeight - room
+  }
+
+  return { showXStart, showXEnd, showYStart, showYEnd, updateEdges }
+}

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

@@ -0,0 +1,39 @@
+import { createSharedComposable, useMutationObserver } from '@vueuse/core'
+import { onBeforeUnmount, ref, watch, type ShallowRef } from 'vue'
+
+const useBodyPointerLock = createSharedComposable(() => {
+  const locked = ref(false)
+  if (typeof document !== 'undefined') {
+    const read = () => {
+      locked.value = document.body.style.pointerEvents === 'none'
+    }
+    read()
+    useMutationObserver(document.body, read, { attributes: true, attributeFilter: ['style'] })
+  }
+  return locked
+})
+
+function block(event: Event) {
+  event.preventDefault()
+}
+
+export function useLayerLock(viewport: ShallowRef<HTMLElement | undefined>) {
+  const locked = useBodyPointerLock()
+  let release: (() => void) | undefined
+
+  function apply() {
+    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 })
+    release = () => {
+      el.removeEventListener('wheel', block)
+      el.removeEventListener('touchmove', block)
+    }
+  }
+
+  watch([locked, viewport], apply, { flush: 'post' })
+  onBeforeUnmount(() => release?.())
+}

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

@@ -0,0 +1,109 @@
+import { onBeforeUnmount, onMounted, shallowRef, type ShallowRef } from 'vue'
+import {
+  OverlayScrollbars,
+  type OverlayScrollbars as OSInstance,
+  type PartialOptions,
+} from 'overlayscrollbars'
+
+type OSEvent = 'scroll' | 'updated'
+
+type IdleRequest = (callback: () => void, options?: { timeout: number }) => number
+
+function idleScheduler(): [(task: () => void) => void, () => void] {
+  if (typeof window === 'undefined') {
+    const noop = () => {}
+    return [noop, noop]
+  }
+  const hasIdle = typeof window.requestIdleCallback === 'function'
+  const request: IdleRequest = hasIdle ? window.requestIdleCallback : window.requestAnimationFrame
+  const cancelRequest = hasIdle ? window.cancelIdleCallback : window.cancelAnimationFrame
+  let requestId: number | undefined
+  let frameId: number | undefined
+
+  const cancel = () => {
+    if (requestId !== undefined) cancelRequest(requestId)
+    if (frameId !== undefined) cancelAnimationFrame(frameId)
+    requestId = undefined
+    frameId = undefined
+  }
+  const schedule = (task: () => void) => {
+    cancel()
+    requestId = request(
+      hasIdle
+        ? () => {
+            cancel()
+            frameId = requestAnimationFrame(task)
+          }
+        : task,
+      { timeout: 2233 },
+    )
+  }
+  return [schedule, cancel]
+}
+
+export function useOverlayScrollbars(
+  host: ShallowRef<HTMLElement | undefined>,
+  content: ShallowRef<HTMLElement | undefined>,
+  options: () => PartialOptions,
+) {
+  const viewport = shallowRef<HTMLElement>()
+  const instance = shallowRef<OSInstance>()
+  const listeners: Array<[OSEvent, () => void]> = []
+  const [schedule, cancelSchedule] = idleScheduler()
+
+  let lastGesture = Number.NEGATIVE_INFINITY
+  let retryId: ReturnType<typeof setTimeout> | undefined
+
+  const markGesture = () => {
+    lastGesture = performance.now()
+  }
+
+  function onEvent(event: OSEvent, cb: () => void) {
+    listeners.push([event, cb])
+  }
+
+  onMounted(() => {
+    const target = host.value
+    if (target) {
+      for (const name of ['wheel', 'touchmove', 'scroll'] as const) {
+        target.addEventListener(name, markGesture, { passive: true, capture: true })
+      }
+    }
+    schedule(function takeover() {
+      if (!host.value || !content.value) return
+      if (performance.now() - lastGesture < 250) {
+        retryId = setTimeout(takeover, 300)
+        return
+      }
+      if (target) {
+        for (const name of ['wheel', 'touchmove', 'scroll'] as const) {
+          target.removeEventListener(name, markGesture, { capture: true })
+        }
+      }
+      instance.value = OverlayScrollbars(
+        {
+          target: host.value,
+          elements: { viewport: content.value, content: content.value },
+        },
+        options(),
+      )
+      viewport.value = instance.value.elements().viewport
+      for (const [event, cb] of listeners) instance.value.on(event, cb)
+    })
+  })
+
+  onBeforeUnmount(() => {
+    cancelSchedule()
+    clearTimeout(retryId)
+    if (host.value) {
+      for (const name of ['wheel', 'touchmove', 'scroll'] as const) {
+        host.value.removeEventListener(name, markGesture, { capture: true })
+      }
+    }
+    instance.value?.destroy()
+    instance.value = undefined
+    viewport.value = undefined
+  })
+
+  return { viewport, instance, onEvent }
+}

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

@@ -0,0 +1,30 @@
+import { watch, type ShallowRef } from 'vue'
+
+export function useWheelRedirect(
+  viewport: ShallowRef<HTMLElement | undefined>,
+  enabled: () => boolean,
+) {
+  function onWheel(event: WheelEvent) {
+    if (!enabled()) return
+    const el = viewport.value
+    if (!el) return
+    if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) return
+    const max = el.scrollWidth - el.clientWidth
+    if (max <= 0) return
+    const atStart = el.scrollLeft <= 0 && event.deltaY < 0
+    const atEnd = el.scrollLeft >= max - 1 && event.deltaY > 0
+    if (atStart || atEnd) return
+    event.preventDefault()
+    el.scrollLeft += event.deltaY
+  }
+
+  watch(
+    viewport,
+    (el, _, onCleanup) => {
+      if (!el) return
+      el.addEventListener('wheel', onWheel, { passive: false })
+      onCleanup(() => el.removeEventListener('wheel', onWheel))
+    },
+    { immediate: true },
+  )
+}