@hina-ui/vue 1.0.0

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

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+  import { computed, getCurrentInstance, shallowRef, watch } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import TooltipProvider from '../tooltip/TooltipProvider.vue'
+  import Drawer from '../drawer/Drawer.vue'
+  import DrawerScope from '../sidebar/DrawerScope'
+  import { provideSidebar, type SidebarState } from '../sidebar/context'
+  import { useDesktopQuery } from './composables/useDesktopQuery'
+
+  defineOptions({ name: 'HnAppShell' })
+
+  const props = withDefaults(
+    defineProps<{
+      collapsible?: 'rail' | 'hidden'
+      restoreKey?: string
+      autoClose?: boolean
+      class?: string
+    }>(),
+    { collapsible: 'rail', autoClose: true },
+  )
+
+  const t = useUiLocale()
+
+  const sidebar = defineModel<SidebarState>('sidebar', { default: 'expanded' })
+  const mobileOpen = defineModel<boolean>('mobileOpen', { default: false })
+  const main = shallowRef<InstanceType<typeof ScrollArea>>()
+
+  defineExpose({
+    mainViewport: computed(() => main.value?.viewport),
+    mainArea: main,
+  })
+
+  const isDesktop = useDesktopQuery()
+
+  function toggle() {
+    if (!isDesktop.value) {
+      mobileOpen.value = !mobileOpen.value
+      return
+    }
+    sidebar.value = sidebar.value === 'expanded' ? props.collapsible : 'expanded'
+  }
+
+  provideSidebar({
+    state: computed(() => sidebar.value),
+    toggle,
+    openMobile: () => (mobileOpen.value = true),
+  })
+
+  type Navigable = { currentRoute?: { value?: { fullPath?: string } } }
+  const router = getCurrentInstance()?.appContext.config.globalProperties.$router as
+    Navigable | undefined
+
+  watch(
+    () => router?.currentRoute?.value?.fullPath,
+    () => {
+      if (props.autoClose) mobileOpen.value = false
+    },
+  )
+</script>
+
+<template>
+  <TooltipProvider>
+    <div :class="cn('bg-canvas text-fg flex h-screen flex-col overflow-hidden', props.class)">
+      <div v-if="$slots.banner" class="shrink-0">
+        <slot name="banner" />
+      </div>
+      <div class="flex min-h-0 flex-1">
+        <div v-if="$slots.sidebar" class="hidden h-full shrink-0 lg:block">
+          <slot name="sidebar" />
+        </div>
+        <div class="flex min-h-0 min-w-0 flex-1 flex-col">
+          <header v-if="$slots.header" class="border-line bg-canvas shrink-0 border-b">
+            <div class="flex h-14 items-center gap-3 px-4 sm:px-6">
+              <slot name="header" />
+            </div>
+          </header>
+          <main class="min-h-0 min-w-0 flex-1">
+            <ScrollArea ref="main" :data-scroll-restore="props.restoreKey" class="h-full">
+              <slot />
+            </ScrollArea>
+          </main>
+        </div>
+      </div>
+      <Drawer
+        v-if="$slots.sidebar"
+        v-model:open="mobileOpen"
+        :title="t.sidebar.navLabel"
+        side="start"
+        size="sm"
+        class="lg:hidden"
+      >
+        <template #content>
+          <DrawerScope>
+            <slot name="sidebar" />
+          </DrawerScope>
+        </template>
+      </Drawer>
+    </div>
+  </TooltipProvider>
+</template>

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

@@ -0,0 +1,20 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+export function useDesktopQuery(query = '(min-width: 64rem)') {
+  const isDesktop = ref(true)
+  let media: MediaQueryList | undefined
+
+  function onChange() {
+    isDesktop.value = media?.matches ?? true
+  }
+
+  onMounted(() => {
+    media = window.matchMedia(query)
+    media.addEventListener('change', onChange)
+    onChange()
+  })
+
+  onBeforeUnmount(() => media?.removeEventListener('change', onChange))
+
+  return isDesktop
+}

package/src/components/aspect-ratio/AspectRatio.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import { AspectRatio as RekaAspectRatio } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnAspectRatio' })
+
+  const props = withDefaults(
+    defineProps<{
+      ratio?: number
+      class?: string
+    }>(),
+    { ratio: 16 / 9 },
+  )
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        '[&_img]:size-full [&_img]:object-cover [&_video]:size-full [&_video]:object-cover',
+        props.class,
+      )
+    "
+  >
+    <RekaAspectRatio :ratio="props.ratio">
+      <slot />
+    </RekaAspectRatio>
+  </div>
+</template>

package/src/components/avatar/Avatar.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { User } from '@lucide/vue'
+  import { cn } from '../../lib/cn'
+  import Image from '../image/Image.vue'
+  import { avatar, type AvatarVariants } from './avatar.variants'
+  import { useAvatarGroup } from './context'
+
+  defineOptions({ name: 'HnAvatar', inheritAttrs: false })
+
+  const props = defineProps<{
+    src?: string
+    alt?: string
+    name?: string
+    size?: AvatarVariants['size']
+    class?: string
+  }>()
+
+  const group = useAvatarGroup()
+  const size = computed(() => props.size ?? group?.value.size)
+
+  const initials = computed(() => {
+    const name = props.name?.trim()
+    if (!name) return ''
+    const words = name.split(/\s+/)
+    if (words.length > 1)
+      return words
+        .slice(0, 2)
+        .map(w => w[0]!.toUpperCase())
+        .join('')
+    return /^[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u.test(name)
+      ? name[0]!
+      : name.slice(0, 2).toUpperCase()
+  })
+</script>
+
+<template>
+  <Image
+    :src="props.src"
+    :alt="props.alt ?? props.name ?? ''"
+    :class="cn(avatar({ size }), props.class)"
+    v-bind="$attrs"
+  >
+    <template #empty>
+      <slot>
+        <template v-if="initials">{{ initials }}</template>
+        <User v-else aria-hidden="true" />
+      </slot>
+    </template>
+    <template #error>
+      <slot>
+        <template v-if="initials">{{ initials }}</template>
+        <User v-else aria-hidden="true" />
+      </slot>
+    </template>
+  </Image>
+</template>

package/src/components/avatar/AvatarGroup.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+  import { computed, useSlots, Fragment, type VNode } from 'vue'
+  import { cn } from '../../lib/cn'
+  import Avatar from './Avatar.vue'
+  import type { AvatarVariants } from './avatar.variants'
+  import { avatarGroupItem } from './avatar-group.variants'
+  import { provideAvatarGroup } from './context'
+
+  defineOptions({ name: 'HnAvatarGroup' })
+
+  const props = defineProps<{
+    max?: number
+    size?: AvatarVariants['size']
+    class?: string
+  }>()
+
+  const slots = useSlots()
+
+  function flatten(nodes: VNode[] | undefined): VNode[] {
+    return (nodes ?? []).flatMap(node =>
+      node.type === Fragment ? flatten(node.children as VNode[]) : [node],
+    )
+  }
+
+  const children = computed(() => flatten(slots.default?.()))
+  const visible = computed(() =>
+    props.max && props.max > 0 ? children.value.slice(0, props.max) : children.value,
+  )
+  const hidden = computed(() => children.value.length - visible.value.length)
+  const item = computed(() => avatarGroupItem({ size: props.size }))
+
+  provideAvatarGroup(computed(() => ({ size: props.size })))
+</script>
+
+<template>
+  <div :class="cn('flex flex-row-reverse justify-end', props.class)">
+    <Avatar v-if="hidden > 0" :class="item">+{{ hidden }}</Avatar>
+    <component :is="node" v-for="(node, i) in [...visible].reverse()" :key="i" :class="item" />
+  </div>
+</template>

package/src/components/avatar/avatar-group.variants.ts

@@ -0,0 +1,15 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const avatarGroupItem = tv({
+  base: 'ring-surface first:me-0 ring-2',
+  variants: {
+    size: {
+      sm: '-me-1.5',
+      md: '-me-2',
+      lg: '-me-2.5',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type AvatarGroupVariants = VariantProps<typeof avatarGroupItem>

package/src/components/avatar/avatar.variants.ts

@@ -0,0 +1,18 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const avatar = tv({
+  base: [
+    'bg-inset text-muted relative inline-flex shrink-0 items-center justify-center',
+    'overflow-hidden rounded-full align-middle font-medium select-none',
+  ],
+  variants: {
+    size: {
+      sm: 'size-6 text-xs [&_svg]:size-3.5',
+      md: 'size-8 text-sm [&_svg]:size-4',
+      lg: 'size-10 text-base [&_svg]:size-5',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type AvatarVariants = VariantProps<typeof avatar>

package/src/components/avatar/context.ts

@@ -0,0 +1,16 @@
+import { inject, provide, type ComputedRef, type InjectionKey } from 'vue'
+import type { AvatarVariants } from './avatar.variants'
+
+export interface AvatarGroupContext {
+  size: AvatarVariants['size']
+}
+
+const KEY: InjectionKey<ComputedRef<AvatarGroupContext>> = Symbol('hn-avatar-group')
+
+export function provideAvatarGroup(context: ComputedRef<AvatarGroupContext>) {
+  provide(KEY, context)
+}
+
+export function useAvatarGroup() {
+  return inject(KEY, null)
+}

package/src/components/badge/Badge.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import VisuallyHidden from '../visually-hidden/VisuallyHidden.vue'
+  import { cn } from '../../lib/cn'
+  import { badge, type BadgeVariants } from './badge.variants'
+
+  defineOptions({ name: 'HnBadge' })
+
+  const props = withDefaults(
+    defineProps<{
+      content?: string | number | null
+      max?: number
+      tone?: BadgeVariants['tone']
+      size?: BadgeVariants['size']
+      placement?: BadgeVariants['placement']
+      shape?: BadgeVariants['shape']
+      outline?: boolean
+      bare?: boolean
+      label?: string
+      class?: string
+    }>(),
+    { max: 99, outline: true },
+  )
+
+  const visible = computed(
+    () =>
+      props.content !== undefined &&
+      props.content !== null &&
+      props.content !== '' &&
+      props.content !== 0,
+  )
+
+  const text = computed(() =>
+    typeof props.content === 'number' && props.content > props.max
+      ? `${props.max}+`
+      : props.content,
+  )
+</script>
+
+<template>
+  <span :class="cn('relative inline-flex shrink-0 align-middle', props.class)">
+    <slot />
+    <Transition
+      enter-active-class="hn-transition-base"
+      enter-from-class="scale-50 opacity-0"
+      leave-active-class="hn-transition"
+      leave-to-class="scale-50 opacity-0"
+    >
+      <span
+        v-if="visible"
+        :class="
+          badge({
+            tone: props.tone,
+            size: props.size,
+            placement: props.placement,
+            shape: props.shape,
+            outline: props.outline,
+            bare: props.bare,
+          })
+        "
+      >
+        <slot name="content">{{ text }}</slot>
+        <VisuallyHidden v-if="props.label">{{ props.label }}</VisuallyHidden>
+      </span>
+    </Transition>
+  </span>
+</template>

package/src/components/badge/badge.variants.ts

@@ -0,0 +1,54 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const badge = tv({
+  base: [
+    'absolute z-[1] inline-flex items-center justify-center rounded-full will-change-transform',
+    'font-medium leading-none whitespace-nowrap select-none',
+  ],
+  variants: {
+    tone: {
+      accent: 'bg-accent text-accent-on',
+      neutral: 'bg-neutral-solid text-neutral-solid-on',
+      success: 'bg-success text-success-on',
+      warning: 'bg-warning text-warning-on',
+      danger: 'bg-danger text-danger-on',
+      info: 'bg-info text-info-on',
+    },
+    size: {
+      sm: 'h-4 min-w-4 px-1 text-xs',
+      md: 'h-5 min-w-5 px-1.5 text-xs',
+    },
+    placement: {
+      'top-end': 'top-0 end-0 translate-x-1/2 -translate-y-1/2',
+      'top-start': 'top-0 start-0 -translate-x-1/2 -translate-y-1/2',
+      'bottom-end': 'bottom-0 end-0 translate-x-1/2 translate-y-1/2',
+      'bottom-start': 'bottom-0 start-0 -translate-x-1/2 translate-y-1/2',
+    },
+    shape: {
+      rect: '',
+      circle: '',
+    },
+    outline: {
+      true: 'ring-surface ring-2',
+      false: '',
+    },
+    bare: {
+      true: 'h-auto min-w-0 bg-transparent p-0',
+    },
+  },
+  compoundVariants: [
+    { shape: 'circle', placement: 'top-end', class: 'top-[14%] end-[14%]' },
+    { shape: 'circle', placement: 'top-start', class: 'top-[14%] start-[14%]' },
+    { shape: 'circle', placement: 'bottom-end', class: 'bottom-[14%] end-[14%]' },
+    { shape: 'circle', placement: 'bottom-start', class: 'bottom-[14%] start-[14%]' },
+  ],
+  defaultVariants: {
+    tone: 'danger',
+    size: 'sm',
+    placement: 'top-end',
+    shape: 'rect',
+    outline: true,
+  },
+})
+
+export type BadgeVariants = VariantProps<typeof badge>

package/src/components/banner/Banner.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts" generic="T">
+  import { ChevronLeft, ChevronRight } from '@lucide/vue'
+  import { computed, ref, watch } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useCollapseHooks } from '../../lib/collapse'
+  import { useUiLocale } from '../../locale'
+  import CloseButton from '../close-button/CloseButton.vue'
+  import IconButton from '../icon-button/IconButton.vue'
+  import {
+    banner,
+    bannerActions,
+    bannerContent,
+    bannerControls,
+    bannerCounter,
+    bannerIcon,
+    bannerItem,
+    bannerSlide,
+    type BannerVariants,
+  } from './banner.variants'
+  import { useAutoplay } from './composables/useAutoplay'
+  import { bannerIcons } from './icons'
+  import type { BannerNotice } from './types'
+  import { stepBetween } from './utils/direction'
+
+  defineOptions({ name: 'HnBanner' })
+
+  const props = withDefaults(
+    defineProps<{
+      tone?: BannerVariants['tone']
+      icon?: boolean
+      closable?: boolean
+      items?: T[]
+      autoplay?: number
+      class?: string
+    }>(),
+    { tone: 'accent', icon: true },
+  )
+
+  const open = defineModel<boolean>('open', { default: true })
+  const index = defineModel<number>('index', { default: 0 })
+
+  const emit = defineEmits<{ close: [] }>()
+
+  const slots = defineSlots<{
+    default?(): unknown
+    icon?(): unknown
+    actions?(): unknown
+    item?(props: { item: T; index: number }): unknown
+  }>()
+
+  const t = useUiLocale()
+  const hooks = useCollapseHooks()
+
+  const count = computed(() => props.items?.length ?? 0)
+  const multiple = computed(() => count.value > 1)
+  const at = computed(() =>
+    count.value ? ((index.value % count.value) + count.value) % count.value : 0,
+  )
+  const current = computed(() => props.items?.[at.value])
+  const notice = computed(() => current.value as BannerNotice | undefined)
+  const tone = computed(() => notice.value?.tone ?? props.tone)
+  const icon = computed(() => notice.value?.icon ?? bannerIcons[tone.value])
+
+  const direction = ref<1 | -1>(1)
+  let pending: 1 | -1 | undefined
+
+  watch(index, (next, previous) => {
+    direction.value = pending ?? stepBetween(previous, next, count.value)
+    pending = undefined
+  })
+
+  const slide = computed(() => bannerSlide[direction.value > 0 ? 'forward' : 'backward'])
+
+  function go(step: 1 | -1) {
+    pending = step
+    index.value = (at.value + step + count.value) % count.value
+  }
+
+  const autoplay = useAutoplay(
+    () => props.autoplay,
+    () => multiple.value && open.value,
+    () => go(1),
+  )
+
+  function close() {
+    open.value = false
+    emit('close')
+  }
+</script>
+
+<template>
+  <Transition
+    enter-from-class="hn-collapse-closed"
+    enter-to-class="hn-collapse-open"
+    leave-from-class="hn-collapse-open"
+    leave-to-class="hn-collapse-closed"
+    v-on="hooks"
+  >
+    <div v-if="open" data-hn-banner class="hn-collapse w-full">
+      <div class="hn-collapse-body">
+        <div
+          :data-tone="tone"
+          :class="cn(banner({ tone }), props.class)"
+          @pointerenter="autoplay.hovered.value = true"
+          @pointerleave="autoplay.hovered.value = false"
+          @focusin="autoplay.focused.value = true"
+          @focusout="autoplay.focused.value = false"
+        >
+          <div :class="bannerContent()">
+            <span
+              v-if="props.items"
+              :aria-live="multiple && !props.autoplay ? 'polite' : undefined"
+              class="flex min-w-0 items-center"
+            >
+              <Transition
+                mode="out-in"
+                enter-active-class="hn-transition-base"
+                :enter-from-class="slide.enterFrom"
+                leave-active-class="hn-transition"
+                :leave-to-class="slide.leaveTo"
+              >
+                <span :key="at" :class="bannerItem()">
+                  <slot name="icon">
+                    <component
+                      :is="icon"
+                      v-if="props.icon"
+                      :class="bannerIcon()"
+                      aria-hidden="true"
+                    />
+                  </slot>
+                  <slot name="item" :item="current as T" :index="at" />
+                </span>
+              </Transition>
+            </span>
+            <template v-else>
+              <slot name="icon">
+                <component :is="icon" v-if="props.icon" :class="bannerIcon()" aria-hidden="true" />
+              </slot>
+              <slot />
+            </template>
+            <div v-if="slots.actions" :class="bannerActions()">
+              <slot name="actions" />
+            </div>
+          </div>
+          <div v-if="multiple || props.closable" :class="bannerControls()">
+            <template v-if="multiple">
+              <IconButton
+                size="sm"
+                pill
+                variant="ghost"
+                tone="neutral"
+                :tooltip="false"
+                :label="t.banner.prev"
+                class="text-current"
+                @click="go(-1)"
+              >
+                <ChevronLeft />
+              </IconButton>
+              <span :class="bannerCounter()">{{ at + 1 }} / {{ count }}</span>
+              <IconButton
+                size="sm"
+                pill
+                variant="ghost"
+                tone="neutral"
+                :tooltip="false"
+                :label="t.banner.next"
+                class="text-current"
+                @click="go(1)"
+              >
+                <ChevronRight />
+              </IconButton>
+            </template>
+            <CloseButton v-if="props.closable" size="sm" class="text-current" @click="close" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>

package/src/components/banner/banner.variants.ts

@@ -0,0 +1,52 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const banner = tv({
+  base: 'hn-transition-base grid w-full grid-cols-[1fr_auto] items-center gap-3 px-4 py-2.5 text-sm sm:grid-cols-[1fr_auto_1fr] [&_a]:[--hn-link-color:currentColor]',
+  variants: {
+    tone: {
+      neutral: 'bg-neutral-solid text-neutral-solid-on',
+      accent: 'bg-accent text-accent-on',
+      info: 'bg-info text-info-on',
+      success: 'bg-success text-success-on',
+      warning: 'bg-warning text-warning-on',
+      danger: 'bg-danger text-danger-on',
+    },
+  },
+  defaultVariants: { tone: 'accent' },
+})
+
+export const bannerContent = tv({
+  base: 'flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 sm:col-start-2 sm:justify-center sm:text-center',
+})
+
+export const bannerIcon = tv({
+  base: 'size-4 shrink-0',
+})
+
+export const bannerActions = tv({
+  base: 'flex shrink-0 items-center gap-2',
+})
+
+export const bannerItem = tv({
+  base: 'flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 sm:justify-center',
+})
+
+export const bannerControls = tv({
+  base: 'col-start-2 -my-1 -me-1 flex shrink-0 items-center gap-1 justify-self-end sm:col-start-3',
+})
+
+export const bannerCounter = tv({
+  base: 'text-xs tabular-nums',
+})
+
+const slideForward = {
+  enterFrom: 'opacity-0 translate-x-4 rtl:-translate-x-4',
+  leaveTo: 'opacity-0 -translate-x-4 rtl:translate-x-4',
+}
+
+export const bannerSlide = {
+  forward: slideForward,
+  backward: { enterFrom: slideForward.leaveTo, leaveTo: slideForward.enterFrom },
+}
+
+export type BannerVariants = VariantProps<typeof banner>

package/src/components/banner/composables/useAutoplay.ts

@@ -0,0 +1,31 @@
+import { useDocumentVisibility, useIntervalFn, useMediaQuery } from '@vueuse/core'
+import { computed, onMounted, ref, toValue, watch, type MaybeRefOrGetter } from 'vue'
+
+export function useAutoplay(
+  interval: MaybeRefOrGetter<number | undefined>,
+  enabled: MaybeRefOrGetter<boolean>,
+  tick: () => void,
+) {
+  const hovered = ref(false)
+  const focused = ref(false)
+  const visibility = useDocumentVisibility()
+  const reducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
+
+  const active = computed(
+    () =>
+      toValue(enabled) &&
+      (toValue(interval) ?? 0) > 0 &&
+      !hovered.value &&
+      !focused.value &&
+      visibility.value !== 'hidden' &&
+      !reducedMotion.value,
+  )
+
+  const timer = useIntervalFn(tick, () => toValue(interval) ?? 0, { immediate: false })
+
+  onMounted(() => {
+    watch(active, value => (value ? timer.resume() : timer.pause()), { immediate: true })
+  })
+
+  return { hovered, focused, active }
+}