@hina-ui/vue 1.0.0

package/src/components/lightbox/utils/pose.ts

@@ -0,0 +1,125 @@
+import type { ImageVariants } from '../../image/image.variants'
+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)',
+}
+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, rotation = 0): Rect {
+  const size = fitSize(natural, stage, rotation)
+  return {
+    x: (stage.width - size.width) / 2,
+    y: (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 = 0,
+): 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 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
+  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)})`,
+  }
+}
+
+export function baseScale(frame: Size, stage: Size, rotation: number): number {
+  const visual = rotatedSize(frame, rotation)
+  if (visual.width <= 0 || visual.height <= 0) return 1
+  if (rotation % 180 === 0) return 1
+  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))
+}
+
+export function shouldDismiss(offsetY: number, velocityY: number, stageHeight: number): boolean {
+  if (offsetY <= 0) return false
+  return dismissProgress(offsetY, stageHeight) >= DISMISS_COMMIT || velocityY >= DISMISS_VELOCITY
+}

package/src/components/lightbox/utils/zoom.ts

@@ -0,0 +1,113 @@
+export interface Size {
+  width: number
+  height: number
+}
+
+export interface Point {
+  x: number
+  y: number
+}
+
+export interface Bounds {
+  minX: number
+  maxX: number
+  minY: number
+  maxY: number
+}
+
+export const ZOOM_MIN = 1
+export const ZOOM_MAX = 6
+export const ZOOM_DOUBLE_TAP = 2.5
+export const ZOOM_STEP = 1.5
+export const OVERSHOOT = 0.55
+export const WHEEL_INTENSITY = 0.002
+
+export const ZOOM_EPSILON = 0.001
+
+export function isZoomed(zoom: number): boolean {
+  return zoom > ZOOM_MIN + ZOOM_EPSILON
+}
+
+export function rotatedSize(size: Size, rotation: number): Size {
+  const quarter = Math.round(rotation / 90) % 2
+  return quarter === 0 ? size : { width: size.height, height: size.width }
+}
+
+export function fitSize(natural: Size, stage: Size, rotation = 0): Size {
+  const upright = rotatedSize(natural, rotation)
+  if (upright.width <= 0 || upright.height <= 0) return { width: 0, height: 0 }
+  const scale = Math.min(stage.width / upright.width, stage.height / upright.height)
+  return { width: upright.width * scale, height: upright.height * scale }
+}
+
+export function panBounds(displayed: Size, stage: Size): Bounds {
+  const x = Math.max(0, (displayed.width - stage.width) / 2)
+  const y = Math.max(0, (displayed.height - stage.height) / 2)
+  return { minX: x ? -x : 0, maxX: x, minY: y ? -y : 0, maxY: y }
+}
+
+export function clampOffset(offset: Point, bounds: Bounds): Point {
+  return {
+    x: Math.min(Math.max(offset.x, bounds.minX), bounds.maxX),
+    y: Math.min(Math.max(offset.y, bounds.minY), bounds.maxY),
+  }
+}
+
+export function zoomAbout(offset: Point, zoom: number, next: number, focal: Point): Point {
+  const ratio = next / zoom
+  return {
+    x: focal.x - (focal.x - offset.x) * ratio,
+    y: focal.y - (focal.y - offset.y) * ratio,
+  }
+}
+
+function resist(over: number, span: number, coefficient: number): number {
+  return (1 - 1 / ((over * coefficient) / span + 1)) * span
+}
+
+export function rubberBand(
+  value: number,
+  min: number,
+  max: number,
+  span: number,
+  coefficient = OVERSHOOT,
+): number {
+  if (span <= 0) return Math.min(Math.max(value, min), max)
+  if (value > max) return max + resist(value - max, span, coefficient)
+  if (value < min) return min - resist(min - value, span, coefficient)
+  return value
+}
+
+export function elasticOffset(offset: Point, bounds: Bounds, stage: Size): Point {
+  return {
+    x: rubberBand(offset.x, bounds.minX, bounds.maxX, stage.width),
+    y: rubberBand(offset.y, bounds.minY, bounds.maxY, stage.height),
+  }
+}
+
+export function clampZoom(zoom: number, min = ZOOM_MIN, max = ZOOM_MAX): number {
+  return Math.min(Math.max(zoom, min), max)
+}
+
+export function elasticZoom(zoom: number, min = ZOOM_MIN, max = ZOOM_MAX): number {
+  const lo = Math.log(min)
+  const hi = Math.log(max)
+  return Math.exp(rubberBand(Math.log(zoom), lo, hi, hi - lo))
+}
+
+export function pinchZoom(startZoom: number, startDistance: number, distance: number): number {
+  if (startDistance <= 0) return startZoom
+  return startZoom * (distance / startDistance)
+}
+
+export function wheelZoom(zoom: number, deltaY: number, intensity = WHEEL_INTENSITY): number {
+  return zoom * Math.exp(-deltaY * intensity)
+}
+
+export function doubleTapZoom(zoom: number): number {
+  return isZoomed(zoom) ? ZOOM_MIN : ZOOM_DOUBLE_TAP
+}
+
+export function stepZoom(zoom: number, direction: 1 | -1): number {
+  return clampZoom(zoom * ZOOM_STEP ** direction)
+}

package/src/components/link/Link.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import { Primitive, type PrimitiveProps } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { link, type LinkVariants } from './link.variants'
+
+  defineOptions({ name: 'HnLink' })
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        tone?: LinkVariants['tone']
+        underline?: boolean
+        class?: string
+      }
+    >(),
+    { as: 'a', tone: 'accent' },
+  )
+</script>
+
+<template>
+  <Primitive
+    :as="props.as"
+    :as-child="props.asChild"
+    :data-underline="props.underline ? '' : undefined"
+    :class="cn(link({ tone: props.tone }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/link/link.variants.ts

@@ -0,0 +1,14 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const link = tv({
+  base: 'hn-link cursor-pointer',
+  variants: {
+    tone: {
+      accent: '[--hn-link-color:var(--hn-accent-text)]',
+      neutral: '[--hn-link-color:var(--hn-fg-default)]',
+    },
+  },
+  defaultVariants: { tone: 'accent' },
+})
+
+export type LinkVariants = VariantProps<typeof link>

package/src/components/list/List.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnList' })
+
+  const props = defineProps<{ ordered?: boolean; class?: string }>()
+</script>
+
+<template>
+  <component :is="props.ordered ? 'ol' : 'ul'" :class="cn('hn-list', props.class)">
+    <slot />
+  </component>
+</template>

package/src/components/list/ListItem.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnListItem' })
+
+  const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <li :class="cn(props.class)">
+    <slot />
+  </li>
+</template>

package/src/components/listbox/Listbox.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+  import { Check } from '@lucide/vue'
+  import {
+    ListboxContent,
+    ListboxGroup,
+    ListboxGroupLabel,
+    ListboxItem,
+    ListboxItemIndicator,
+    ListboxRoot,
+  } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useFieldControl } from '../form-field/context'
+  import { useUiLocale } from '../../locale'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import { selectEmpty, selectItem, selectLabel } from '../select/select.variants'
+  import { isOptionGroup, type SelectItems, type SelectOption } from '../select/types'
+  import { listbox, listboxContent, type ListboxVariants } from './listbox.variants'
+
+  defineOptions({ name: 'HnListbox', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      options: SelectItems
+      multiple?: boolean
+      maxHeight?: string
+      variant?: ListboxVariants['variant']
+      disabled?: boolean
+      class?: string
+    }>(),
+    { maxHeight: '20rem' },
+  )
+
+  const model = defineModel<string | number | null | Array<string | number>>()
+
+  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+
+  const t = useUiLocale()
+
+  const { labelledBy, invalid, disabled, describedBy } = useFieldControl({
+    disabled: () => props.disabled,
+  })
+</script>
+
+<template>
+  <ListboxRoot
+    v-model="model"
+    :multiple="props.multiple"
+    :disabled="disabled"
+    :aria-labelledby="labelledBy"
+    :aria-describedby="describedBy"
+    :aria-invalid="invalid || undefined"
+    data-hn-listbox
+    :data-disabled="disabled ? '' : undefined"
+    :data-invalid="invalid ? '' : undefined"
+    :class="cn(listbox({ variant: props.variant }), props.class)"
+  >
+    <ScrollArea :style="{ maxHeight: props.maxHeight }">
+      <ListboxContent v-bind="$attrs" :class="listboxContent()">
+        <template
+          v-for="item in props.options"
+          :key="isOptionGroup(item) ? item.label : item.value"
+        >
+          <ListboxGroup v-if="isOptionGroup(item)">
+            <ListboxGroupLabel :class="selectLabel()">{{ item.label }}</ListboxGroupLabel>
+            <ListboxItem
+              v-for="option in item.options"
+              :key="option.value"
+              :value="option.value"
+              :disabled="option.disabled"
+              :class="selectItem()"
+            >
+              <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>
+              <span class="flex size-4 shrink-0 items-center justify-center">
+                <ListboxItemIndicator><Check /></ListboxItemIndicator>
+              </span>
+            </ListboxItem>
+          </ListboxGroup>
+          <ListboxItem v-else :value="item.value" :disabled="item.disabled" :class="selectItem()">
+            <span class="min-w-0 flex-1">
+              <slot name="option" :option="item">
+                <span class="block truncate">{{ item.label }}</span>
+                <span v-if="item.description" class="text-muted block truncate text-xs">
+                  {{ item.description }}
+                </span>
+              </slot>
+            </span>
+            <span class="flex size-4 shrink-0 items-center justify-center">
+              <ListboxItemIndicator><Check /></ListboxItemIndicator>
+            </span>
+          </ListboxItem>
+        </template>
+        <div v-if="props.options.length === 0" :class="selectEmpty()">{{ t.select.empty }}</div>
+      </ListboxContent>
+    </ScrollArea>
+  </ListboxRoot>
+</template>

package/src/components/listbox/listbox.variants.ts

@@ -0,0 +1,23 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const listbox = tv({
+  base: [
+    'flex w-full min-w-0 flex-col overflow-hidden rounded-md data-disabled:opacity-50',
+    '[&:not(:focus-within)_[data-highlighted]:not(:hover)]:[--hn-state-hover-opacity:0]',
+  ],
+  variants: {
+    variant: {
+      primary: 'border-line bg-surface border shadow-sm',
+      secondary: 'bg-inset',
+    },
+  },
+  defaultVariants: {
+    variant: 'primary',
+  },
+})
+
+export const listboxContent = tv({
+  base: 'flex flex-col p-1 outline-none',
+})
+
+export type ListboxVariants = VariantProps<typeof listbox>

package/src/components/loading-overlay/LoadingOverlay.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import Spinner from '../spinner/Spinner.vue'
+  import type { SpinnerVariants } from '../spinner/spinner.variants'
+  import Text from '../text/Text.vue'
+  import { useDelayedVisible } from './composables/useDelayedVisible'
+  import { loadingBlocker, loadingOverlay } from './loading-overlay.variants'
+
+  defineOptions({ name: 'HnLoadingOverlay' })
+
+  const props = withDefaults(
+    defineProps<{
+      visible?: boolean
+      text?: string
+      fixed?: boolean
+      size?: SpinnerVariants['size']
+      delay?: number
+      minVisible?: number
+      class?: string
+    }>(),
+    { visible: false, fixed: false, size: 'md', delay: 300, minVisible: 300 },
+  )
+
+  const shown = useDelayedVisible(
+    () => props.visible,
+    () => ({ delay: props.delay, minVisible: props.minVisible }),
+  )
+</script>
+
+<template>
+  <div
+    v-if="props.visible && !shown"
+    data-hn-loading-blocker
+    aria-hidden="true"
+    :class="loadingBlocker({ fixed: props.fixed })"
+  />
+  <Transition
+    enter-active-class="hn-transition-base"
+    enter-from-class="opacity-0"
+    leave-active-class="hn-transition"
+    leave-to-class="opacity-0"
+  >
+    <div
+      v-if="shown"
+      data-hn-loading-overlay
+      :class="cn(loadingOverlay({ fixed: props.fixed }), props.class)"
+    >
+      <slot>
+        <Spinner :size="props.size" :label="props.text" />
+        <Text v-if="props.text" size="sm" tone="muted" aria-hidden="true">{{ props.text }}</Text>
+      </slot>
+    </div>
+  </Transition>
+</template>

package/src/components/loading-overlay/composables/useDelayedVisible.ts

@@ -0,0 +1,51 @@
+import { onBeforeUnmount, shallowRef, watch } from 'vue'
+
+interface Delays {
+  delay: number
+  minVisible: number
+}
+
+export function useDelayedVisible(visible: () => boolean, delays: () => Delays) {
+  const shown = shallowRef(false)
+  let timer: ReturnType<typeof setTimeout> | undefined
+  let shownAt = 0
+
+  function clear() {
+    clearTimeout(timer)
+    timer = undefined
+  }
+
+  function show() {
+    shown.value = true
+    shownAt = performance.now()
+    timer = undefined
+  }
+
+  function hide() {
+    shown.value = false
+    timer = undefined
+  }
+
+  watch(
+    visible,
+    value => {
+      clear()
+      const { delay, minVisible } = delays()
+      if (value) {
+        if (shown.value) return
+        if (delay <= 0) show()
+        else timer = setTimeout(show, delay)
+        return
+      }
+      if (!shown.value) return
+      const remaining = minVisible - (performance.now() - shownAt)
+      if (remaining <= 0) hide()
+      else timer = setTimeout(hide, remaining)
+    },
+    { immediate: true },
+  )
+
+  onBeforeUnmount(clear)
+
+  return shown
+}

package/src/components/loading-overlay/loading-overlay.variants.ts

@@ -0,0 +1,25 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const loadingOverlay = tv({
+  base: 'bg-veil flex flex-col items-center justify-center gap-3',
+  variants: {
+    fixed: {
+      true: 'fixed inset-0 z-(--hn-z-overlay)',
+      false: 'absolute inset-0 z-10',
+    },
+  },
+  defaultVariants: { fixed: false },
+})
+
+export const loadingBlocker = tv({
+  base: '',
+  variants: {
+    fixed: {
+      true: 'fixed inset-0 z-(--hn-z-overlay)',
+      false: 'absolute inset-0 z-10',
+    },
+  },
+  defaultVariants: { fixed: false },
+})
+
+export type LoadingOverlayVariants = VariantProps<typeof loadingOverlay>

package/src/components/mark/Mark.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnMark' })
+
+  const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <mark :class="cn('hn-mark', props.class)"><slot /></mark>
+</template>

package/src/components/menubar/Menubar.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import { MenubarRoot } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { menubarRoot } from './menubar.variants'
+
+  defineOptions({ name: 'HnMenubar' })
+
+  const props = withDefaults(
+    defineProps<{
+      label?: string
+      loop?: boolean
+      class?: string
+    }>(),
+    { loop: true },
+  )
+
+  const value = defineModel<string>()
+</script>
+
+<template>
+  <MenubarRoot
+    v-model="value"
+    :loop="props.loop"
+    :aria-label="props.label"
+    :class="cn(menubarRoot(), props.class)"
+  >
+    <slot />
+  </MenubarRoot>
+</template>

package/src/components/menubar/MenubarCheckboxItem.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+  import { Check } from '@lucide/vue'
+  import { MenubarCheckboxItem, MenubarItemIndicator } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { dropdownItem } from '../dropdown-menu/dropdown-menu.variants'
+
+  defineOptions({ name: 'HnMenubarCheckboxItem', inheritAttrs: false })
+
+  const props = defineProps<{
+    disabled?: boolean
+    textValue?: string
+    class?: string
+  }>()
+
+  const checked = defineModel<boolean>('checked', { default: false })
+</script>
+
+<template>
+  <MenubarCheckboxItem
+    v-bind="$attrs"
+    v-model="checked"
+    :disabled="props.disabled"
+    :text-value="props.textValue"
+    :class="cn(dropdownItem(), props.class)"
+    @select="(event: Event) => event.preventDefault()"
+  >
+    <span class="min-w-0 flex-1"><slot /></span>
+    <slot name="trailing" />
+    <span class="flex size-4 shrink-0 items-center justify-center">
+      <MenubarItemIndicator>
+        <Check />
+      </MenubarItemIndicator>
+    </span>
+  </MenubarCheckboxItem>
+</template>

package/src/components/menubar/MenubarGroup.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+  import { MenubarGroup } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnMenubarGroup' })
+
+  const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <MenubarGroup :class="cn('flex flex-col gap-0.5', props.class)">
+    <slot />
+  </MenubarGroup>
+</template>