@hina-ui/vue 1.7.3 → 1.7.4

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

@@ -13,6 +13,7 @@
   const props = withDefaults(
     defineProps<{
       direction?: 'vertical' | 'horizontal' | 'both'
+      dir?: 'ltr' | 'rtl' | 'auto'
       autoHide?: 'never' | 'scroll' | 'leave' | 'move'
       scrollbar?: boolean
       wheelRedirect?: boolean
@@ -51,10 +52,7 @@
       },
       overflow: overflow[props.direction],
       update: {
-        elementEvents: [
-          ['img', 'load'],
-          ['*', 'transitionend animationend'],
-        ] as Array<[string, string]>,
+        elementEvents: [['img', 'load']] as Array<[string, string]>,
       },
     }
   }
@@ -85,12 +83,15 @@
 </script>
 
 <template>
-  <div :class="cn('hn-scroll-area relative flex flex-col overflow-hidden', props.class)">
+  <div
+    :dir="props.dir"
+    :class="cn('hn-scroll-area relative grid grid-cols-1 grid-rows-1 overflow-hidden', props.class)"
+  >
     <div
       ref="host"
       v-bind="{ ...$attrs, ...hostFocus }"
       data-overlayscrollbars-initialize
-      class="w-full min-h-0 grow"
+      class="min-h-0 w-full"
     >
       <div ref="content" v-bind="viewportFocus" data-overlayscrollbars-contents>
         <slot />

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

@@ -1,4 +1,6 @@
-import { onBeforeUnmount, onMounted, shallowRef, type ShallowRef } from 'vue'
+import { onBeforeUnmount, onMounted, shallowRef, watch, type ShallowRef } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { useLayoutTransition } from '../../../lib/layout-stability'
 import {
   OverlayScrollbars,
   type OverlayScrollbars as OSInstance,
@@ -7,40 +9,6 @@ import {
 
 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>,
@@ -49,37 +17,38 @@ export function useOverlayScrollbars(
   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()
-  }
+  let frameId: number | undefined
+  const transitioning = useLayoutTransition()
+  let paused: OSInstance | undefined
+  const stop = watch(
+    [instance, () => transitioning?.value],
+    ([current, active]) => {
+      if (active && current === paused) return
+      const previous = paused
+      paused = undefined
+      if (previous && !previous.state().destroyed) previous.sleep(false)
+      if (active && current && !current.state().sleeping && !current.state().destroyed) {
+        paused = current
+        current.sleep(true)
+      }
+    },
+    { flush: 'sync' },
+  )
+  let updateFrame = 0
+  useEventListener(content, ['transitionend', 'animationend'], () => {
+    if (transitioning?.value) return
+    cancelAnimationFrame(updateFrame)
+    updateFrame = requestAnimationFrame(() => instance.value?.update(true))
+  })
 
   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() {
+    frameId = requestAnimationFrame(() => {
+      frameId = undefined
       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,
@@ -93,13 +62,10 @@ export function useOverlayScrollbars(
   })
 
   onBeforeUnmount(() => {
-    cancelSchedule()
-    clearTimeout(retryId)
-    if (host.value) {
-      for (const name of ['wheel', 'touchmove', 'scroll'] as const) {
-        host.value.removeEventListener(name, markGesture, { capture: true })
-      }
-    }
+    stop()
+    paused = undefined
+    cancelAnimationFrame(updateFrame)
+    if (frameId !== undefined) cancelAnimationFrame(frameId)
     instance.value?.destroy()
     instance.value = undefined
     viewport.value = undefined

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

@@ -11,11 +11,13 @@ export function useWheelRedirect(
     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
+    const sign = getComputedStyle(el).direction === 'rtl' ? -1 : 1
+    const offset = Math.max(0, Math.min(max, el.scrollLeft * sign))
+    const atStart = offset <= 1 && event.deltaY < 0
+    const atEnd = offset >= max - 1 && event.deltaY > 0
     if (atStart || atEnd) return
     event.preventDefault()
-    el.scrollLeft += event.deltaY
+    el.scrollLeft = (offset + event.deltaY) * sign
   }
 
   watch(

package/src/components/scroll-top/ScrollTop.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+  import { ArrowUp } from '@lucide/vue'
+  import { useUiLocale } from '../../locale'
+  import FloatButton from '../float-button/FloatButton.vue'
+  import { useScrollTop } from './composables/useScrollTop'
+  import type { ScrollTopProps } from './types'
+
+  defineOptions({ name: 'HnScrollTop', inheritAttrs: false })
+  const props = withDefaults(defineProps<ScrollTopProps>(), {
+    tooltip: true,
+    ripple: true,
+    variant: 'outline',
+    tone: 'neutral',
+  })
+  const emit = defineEmits<{ click: [event: MouseEvent] }>()
+  defineSlots<{ default?(): unknown }>()
+  const t = useUiLocale()
+  const { visible, scrollToTop, onFocus, onBlur } = useScrollTop(props)
+  function activate(event: MouseEvent) {
+    emit('click', event)
+    if (!event.defaultPrevented) scrollToTop()
+  }
+  defineExpose({ visible, scrollToTop })
+</script>
+
+<template>
+  <FloatButton
+    :visible="visible"
+    v-bind="$attrs"
+    data-hn-scroll-top
+    :label="props.label ?? t.scroll.backToTop"
+    :position="props.position"
+    :placement="props.placement"
+    :offset="props.offset"
+    :size="props.size"
+    :shape="props.shape"
+    :extended="props.extended"
+    :variant="props.variant"
+    :tone="props.tone"
+    :tooltip="props.tooltip"
+    :tooltip-side="props.tooltipSide"
+    :disabled="props.disabled"
+    :loading="props.loading"
+    :ripple="props.ripple"
+    :class="props.class"
+    :style="props.style"
+    @click="activate"
+    @focus="onFocus"
+    @blur="onBlur"
+  >
+    <slot><ArrowUp /></slot>
+  </FloatButton>
+</template>

package/src/components/scroll-top/composables/useScrollTop.ts

@@ -0,0 +1,54 @@
+import { computed, onMounted, ref, toValue, watch, watchEffect } from 'vue'
+import { usePreferredReducedMotion } from '@vueuse/core'
+import type { ScrollTopProps } from '../types'
+
+export function useScrollTop(props: ScrollTopProps) {
+  const mounted = ref(false)
+  const pastThreshold = ref(false)
+  const keyboardFocused = ref(false)
+  const reducedMotion = usePreferredReducedMotion()
+  onMounted(() => {
+    mounted.value = true
+  })
+  const target = computed(() => {
+    if (!mounted.value) return undefined
+    return props.target === undefined ? window : toValue(props.target)
+  })
+  const visible = computed(() => !!target.value && (pastThreshold.value || keyboardFocused.value))
+  watch(target, () => {
+    keyboardFocused.value = false
+  })
+
+  watchEffect(
+    onCleanup => {
+      const element = target.value
+      const threshold = Number.isFinite(props.threshold) ? Math.max(0, props.threshold!) : 300
+      pastThreshold.value = false
+      if (!element) return
+      const update = () => {
+        pastThreshold.value =
+          ('scrollY' in element ? element.scrollY : element.scrollTop) > threshold
+      }
+      update()
+      element.addEventListener('scroll', update, { passive: true })
+      onCleanup(() => element.removeEventListener('scroll', update))
+    },
+    { flush: 'post' },
+  )
+
+  function scrollToTop() {
+    if (!target.value || props.disabled || props.loading) return
+    target.value.scrollTo({
+      top: 0,
+      behavior: reducedMotion.value === 'reduce' ? 'instant' : (props.behavior ?? 'smooth'),
+    })
+    toValue(props.focusTarget)?.focus({ preventScroll: true })
+  }
+  function onFocus(event: FocusEvent) {
+    keyboardFocused.value = (event.target as HTMLElement).matches(':focus-visible')
+  }
+  function onBlur() {
+    keyboardFocused.value = false
+  }
+  return { visible, scrollToTop, onFocus, onBlur }
+}

package/src/components/scroll-top/types.ts

@@ -0,0 +1,13 @@
+import type { FloatButtonProps } from '../float-button/types'
+
+export type ScrollTopTarget = HTMLElement | Window
+export interface ScrollTopProps extends Omit<
+  FloatButtonProps,
+  'label' | 'as' | 'type' | 'visible'
+> {
+  label?: string
+  target?: ScrollTopTarget | null | (() => ScrollTopTarget | null | undefined)
+  threshold?: number
+  behavior?: ScrollBehavior
+  focusTarget?: HTMLElement | (() => HTMLElement | null | undefined)
+}

package/src/components/segmented-control/segmented-control.variants.ts

@@ -1,46 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const segmentedControl = tv({
-  base: [
-    'group/hn-segmented bg-inset relative isolate max-w-full rounded-md p-1 select-none',
-    'data-disabled:cursor-not-allowed data-disabled:opacity-50',
-  ],
-  variants: {
-    orientation: {
-      horizontal: 'flex-row',
-      vertical: 'flex-col',
-    },
-    block: {
-      true: 'flex w-full',
-      false: 'inline-flex w-fit',
-    },
-  },
-  defaultVariants: { orientation: 'horizontal', block: false },
-})
-
-export const segmentedItem = tv({
-  base: [
-    'hn-interactive hn-state-layer hn-press-none text-muted relative z-[1] inline-flex shrink-0 items-center justify-center',
-    'gap-[var(--hn-control-gap)] rounded-xs font-medium whitespace-nowrap',
-    '[--hn-state-selected-opacity:0] [--hn-state-selected-color:var(--hn-fg-muted)] aria-pressed:z-0 aria-pressed:text-fg',
-    'disabled:pointer-events-none disabled:not-in-data-disabled:opacity-50',
-  ],
-  variants: {
-    size: {
-      sm: 'h-[calc(var(--hn-control-h-sm)-(--spacing(2)))] px-[var(--hn-control-px-sm)] text-sm [&_svg]:size-3.5',
-      md: 'h-[calc(var(--hn-control-h-md)-(--spacing(2)))] px-[var(--hn-control-px-md)] text-base [&_svg]:size-4',
-      lg: 'h-[calc(var(--hn-control-h-lg)-(--spacing(2)))] px-[var(--hn-control-px-lg)] text-md [&_svg]:size-[1.125rem]',
-    },
-    block: {
-      true: 'flex-1 basis-0',
-    },
-  },
-  defaultVariants: { size: 'md' },
-})
-
-export const segmentedThumb = tv({
-  base: 'bg-surface absolute inset-0 -z-10 rounded-xs shadow-sm',
-})
-
-export type SegmentedControlVariants = VariantProps<typeof segmentedControl>
-export type SegmentedItemVariants = VariantProps<typeof segmentedItem>
+export * from '../../../../shared/src/variants/segmented-control'

package/src/components/select/Select.vue

@@ -2,6 +2,7 @@
   import { computed, ref, shallowRef } from 'vue'
   import { SelectRoot, SelectTrigger, useDirection } from 'reka-ui'
   import { cn } from '../../lib/cn'
+  import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { useUiLocale } from '../../locale'
   import { X } from '@lucide/vue'
   import InputAction from '../input/InputAction.vue'
@@ -23,6 +24,7 @@
 
   const props = defineProps<{
     options: SelectItems<T>
+    virtualize?: VirtualizeOptions
     placeholder?: string
     clearable?: boolean
     name?: string
@@ -137,7 +139,7 @@
         </span>
       </Transition>
     </div>
-    <SelectList :options="props.options" :keyboard="keyboard">
+    <SelectList :options="props.options" :keyboard="keyboard" :virtualize="props.virtualize">
       <template #option="slotProps">
         <slot name="option" v-bind="slotProps" />
       </template>

package/src/components/select/SelectList.vue

@@ -10,6 +10,9 @@
     SelectPortal,
   } from 'reka-ui'
   import { ref } from 'vue'
+  import VirtualChoices from '../virtual-list/VirtualChoices.vue'
+  import type { VirtualizeOptions } from '../../lib/virtual/types'
+  import { rekaSelectStyle } from '../../lib/reka/styles'
   import { useUiLocale } from '../../locale'
   import Card from '../card/Card.vue'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
@@ -25,7 +28,11 @@
 
   defineOptions({ name: 'HnSelectList' })
 
-  const props = defineProps<{ options: SelectItems<T>; keyboard?: boolean }>()
+  const props = defineProps<{
+    options: SelectItems<T>
+    keyboard?: boolean
+    virtualize?: VirtualizeOptions
+  }>()
 
   const fresh = ref(false)
 
@@ -42,11 +49,42 @@
         data-hn-select-content
         :data-hn-fresh="fresh ? '' : undefined"
         :class="selectContent()"
+        :style="rekaSelectStyle"
         @vue:mounted="fresh = !props.keyboard"
         @keydown="fresh = false"
         @pointermove="fresh = false"
       >
-        <ScrollArea :class="selectList()">
+        <VirtualChoices
+          v-if="props.virtualize"
+          v-slot="{ option, attrs }"
+          :options="props.options"
+          :virtualize="props.virtualize"
+          kind="select"
+          :class="selectList()"
+        >
+          <SelectItem
+            v-bind="attrs"
+            :value="option.value"
+            :disabled="option.disabled"
+            :text-value="option.label"
+            :class="selectItem()"
+          >
+            <SelectItemText as-child>
+              <span class="min-w-0 flex-1">
+                <slot name="option" :option="option">
+                  <span class="block truncate">{{ option.label }}</span>
+                  <span v-if="option.description" class="text-muted block truncate text-xs">
+                    {{ option.description }}
+                  </span>
+                </slot>
+              </span>
+            </SelectItemText>
+            <span class="flex size-4 shrink-0 items-center justify-center">
+              <SelectItemIndicator><Check /></SelectItemIndicator>
+            </span>
+          </SelectItem>
+        </VirtualChoices>
+        <ScrollArea v-else :class="selectList()">
           <div :class="selectListBody()">
             <template
               v-for="item in props.options"

package/src/components/select/select.variants.ts

@@ -1,66 +1 @@
-import { tv } from '../../lib/tv'
-import { inputActionSlot } from '../input/input.variants'
-
-export const selectTrigger = tv({
-  base: [
-    'group/hn-disclosure cursor-pointer items-center ps-[var(--hn-input-px)] pe-0 text-start',
-    'data-placeholder:text-faint data-placeholder:font-normal',
-    'disabled:cursor-not-allowed disabled:opacity-50',
-    '[&_svg]:size-[var(--hn-input-icon)] [&_svg]:shrink-0',
-  ],
-})
-
-export const selectButton = tv({
-  base: [
-    'group/hn-disclosure flex h-full min-w-0 flex-1 cursor-pointer items-center bg-transparent ps-[var(--hn-input-px)] pe-0 text-start text-inherit outline-none [font:inherit]',
-    'data-placeholder:text-faint data-placeholder:font-normal disabled:cursor-not-allowed',
-    '[&_svg]:size-[var(--hn-input-icon)] [&_svg]:shrink-0',
-  ],
-})
-
-export const selectContent = tv({
-  base: [
-    'hn-anim-pop z-(--hn-z-overlay) flex w-[var(--reka-select-trigger-width)] min-w-40 flex-col overflow-hidden shadow-md outline-none',
-    '[&[data-hn-fresh]_[data-highlighted]:not(:hover)]:[--hn-state-hover-opacity:0]',
-  ],
-})
-
-export const selectList = tv({
-  base: 'max-h-[min(20rem,var(--reka-select-content-available-height))]',
-})
-
-export const selectItem = tv({
-  base: [
-    'hn-interactive hn-state-layer hn-press-none relative isolate flex w-full cursor-pointer',
-    'items-center gap-[var(--hn-control-gap)] rounded-md px-2.5 py-2 text-start text-sm select-none',
-    'text-fg outline-none [&_svg]:size-4 [&_svg]:shrink-0',
-    'data-disabled:pointer-events-none data-disabled:opacity-50',
-  ],
-})
-
-export const selectLabel = tv({
-  base: 'text-muted px-2.5 py-1.5 text-xs font-medium',
-})
-
-export const selectEmpty = tv({
-  base: 'text-muted px-2.5 py-2 text-sm',
-})
-
-export const selectListBody = tv({
-  base: 'flex flex-col p-1',
-})
-
-export const selectHost = tv({
-  base: 'relative cursor-pointer',
-})
-
-export const selectValue = tv({
-  base: 'min-w-0 flex-1 truncate',
-  variants: {
-    clearing: { true: 'pe-[var(--hn-input-h)]' },
-  },
-})
-
-export const selectClearSlot = tv({
-  base: [inputActionSlot(), 'absolute inset-y-0 end-[var(--hn-input-h)]'],
-})
+export * from '../../../../shared/src/variants/select'

package/src/components/sheet/sheet.variants.ts

@@ -1,32 +1 @@
-import { tv } from '../../lib/tv'
-
-export const sheetPanel = tv({
-  base: [
-    'hn-anim-sheet-bottom hn-transition pointer-events-auto fixed inset-x-0 bottom-0 z-(--hn-z-overlay)',
-    'mx-auto flex max-h-[calc(100dvh-3rem)] w-full flex-col sm:max-w-xl',
-    'rounded-t-xl rounded-b-none border-b-0 shadow-lg outline-none',
-    'data-dragging:transition-none',
-  ],
-  variants: {
-    padded: { true: 'gap-4 pb-[max(var(--hn-panel-p),env(safe-area-inset-bottom))]' },
-    grip: { true: '', false: '' },
-  },
-  compoundVariants: [
-    { padded: true, grip: true, class: 'pt-2' },
-    { padded: true, grip: false, class: 'pt-(--hn-panel-p)' },
-  ],
-  defaultVariants: { grip: true, padded: true },
-})
-
-export const sheetGrip = tv({
-  base: 'flex shrink-0 cursor-grab touch-none flex-col select-none data-dragging:cursor-grabbing',
-  variants: { standalone: { true: 'py-2' } },
-})
-
-export const sheetHandle = tv({
-  base: 'bg-line-strong hn-transition-base mx-auto h-1.5 w-10 rounded-full data-disabled:opacity-50',
-  variants: {
-    header: { true: 'mb-3', false: '' },
-  },
-  defaultVariants: { header: true },
-})
+export * from '../../../../shared/src/variants/sheet'

package/src/components/sidebar/sidebar.variants.ts

@@ -1,36 +1 @@
-import { tv } from '../../lib/tv'
-
-export const sidebarRoot = tv({
-  base: 'flex h-full min-h-0 shrink-0 flex-col overflow-hidden',
-  variants: {
-    inDrawer: {
-      true: 'w-full',
-      false:
-        'hn-sidebar border-line w-64 border-e data-[state=rail]:w-14 data-[state=hidden]:w-0 data-[state=hidden]:border-e-transparent',
-    },
-  },
-})
-
-export const sidebarRegion = tv({
-  base: 'shrink-0 py-3',
-  variants: {
-    inDrawer: { true: 'w-full', false: 'w-[calc(16rem-1px)] px-3' },
-    footer: { true: 'border-line w-full border-t' },
-  },
-})
-
-export const sidebarLabel = tv({
-  base: 'hn-sidebar-label min-w-0',
-})
-
-export const sidebarBrand = tv({
-  base: 'flex min-h-8 items-center gap-2',
-})
-
-export const sidebarIcon = tv({
-  base: 'flex size-8 shrink-0 items-center justify-center overflow-hidden [&>*]:size-full [&_img]:size-full [&_img]:object-contain [&_svg]:size-full',
-})
-
-export const sidebarWordmark = tv({
-  base: 'flex flex-1 items-center [&_img]:max-h-8 [&_img]:max-w-full [&_img]:object-contain [&_svg]:max-h-8 [&_svg]:max-w-full',
-})
+export * from '../../../../shared/src/variants/sidebar'

package/src/components/simple-grid/simple-grid.variants.ts

@@ -1,25 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const simpleGrid = tv({
-  base: 'grid',
-  variants: {
-    fit: {
-      false: 'grid-cols-[repeat(auto-fill,minmax(var(--hn-simple-grid-min),1fr))]',
-      true: 'grid-cols-[repeat(auto-fit,minmax(var(--hn-simple-grid-min),1fr))]',
-    },
-    gap: {
-      none: 'gap-0',
-      xs: 'gap-1',
-      sm: 'gap-2',
-      md: 'gap-x-[var(--hn-inline-gap)] gap-y-[var(--hn-stack-gap)]',
-      lg: 'gap-6',
-      xl: 'gap-8',
-    },
-  },
-  defaultVariants: {
-    fit: false,
-    gap: 'md',
-  },
-})
-
-export type SimpleGridVariants = VariantProps<typeof simpleGrid>
+export * from '../../../../shared/src/variants/simple-grid'

package/src/components/slider/SliderHandle.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import { injectTooltipProviderContext, SliderThumb } from 'reka-ui'
+  import { rekaSliderThumbStyle } from '../../lib/reka/styles'
   import Tooltip from '../tooltip/Tooltip.vue'
   import { sliderThumb } from './slider.variants'
 
@@ -16,6 +17,7 @@
       v-bind="$attrs"
       :data-focus-ring="props.ring ? '' : undefined"
       :class="sliderThumb()"
+      :style="rekaSliderThumbStyle"
     />
   </Tooltip>
   <SliderThumb
@@ -23,5 +25,6 @@
     v-bind="$attrs"
     :data-focus-ring="props.ring ? '' : undefined"
     :class="sliderThumb()"
+    :style="rekaSliderThumbStyle"
   />
 </template>