@hina-ui/vue 1.0.0

package/src/components/banner/icons.ts

@@ -0,0 +1,7 @@
+import { Megaphone } from '@lucide/vue'
+import { calloutIcons } from '../callout/icons'
+
+export const bannerIcons = {
+  ...calloutIcons,
+  accent: Megaphone,
+} as const

package/src/components/banner/types.ts

@@ -0,0 +1,9 @@
+import type { Component } from 'vue'
+import type { BannerVariants } from './banner.variants'
+
+export type BannerTone = NonNullable<BannerVariants['tone']>
+
+export interface BannerNotice {
+  tone?: BannerTone
+  icon?: Component
+}

package/src/components/banner/utils/direction.ts

@@ -0,0 +1,10 @@
+export type SlideDirection = 1 | -1
+
+export function stepBetween(previous: number, next: number, count: number): SlideDirection {
+  if (count < 2) return 1
+  const from = ((previous % count) + count) % count
+  const to = ((next % count) + count) % count
+  if (to === (from + 1) % count) return 1
+  if (to === (from - 1 + count) % count) return -1
+  return to > from ? 1 : -1
+}

package/src/components/blockquote/Blockquote.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnBlockquote' })
+
+  const props = defineProps<{ cite?: string; class?: string }>()
+</script>
+
+<template>
+  <blockquote :class="cn('hn-blockquote', props.class)">
+    <slot />
+    <footer v-if="props.cite" class="text-faint mt-2 text-sm">—— {{ props.cite }}</footer>
+  </blockquote>
+</template>

package/src/components/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+
+  defineOptions({ name: 'HnBreadcrumb' })
+
+  const props = defineProps<{
+    label?: string
+    class?: string
+  }>()
+
+  const t = useUiLocale()
+</script>
+
+<template>
+  <nav :aria-label="props.label ?? t.breadcrumb.navLabel" :class="cn(props.class)">
+    <ol class="flex flex-wrap items-center gap-1.5 text-sm">
+      <slot />
+    </ol>
+  </nav>
+</template>

package/src/components/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+  import { Primitive, type PrimitiveProps } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnBreadcrumbItem', inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        current?: boolean
+        class?: string
+      }
+    >(),
+    { as: 'a', current: false },
+  )
+</script>
+
+<template>
+  <li class="flex items-center">
+    <span
+      v-if="props.current"
+      v-bind="$attrs"
+      aria-current="page"
+      :class="cn('text-fg font-medium', props.class)"
+    >
+      <slot />
+    </span>
+    <Primitive
+      v-else
+      v-bind="$attrs"
+      :as="props.as"
+      :as-child="props.asChild"
+      :class="cn('hn-link [--hn-link-color:var(--hn-fg-muted)]', props.class)"
+    >
+      <slot />
+    </Primitive>
+  </li>
+</template>

package/src/components/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+  import { ChevronRight } from '@lucide/vue'
+  import { cn } from '../../lib/cn'
+
+  defineOptions({ name: 'HnBreadcrumbSeparator' })
+
+  const props = defineProps<{ class?: string }>()
+</script>
+
+<template>
+  <li aria-hidden="true" :class="cn('text-faint flex items-center', props.class)">
+    <slot>
+      <ChevronRight class="size-3.5" />
+    </slot>
+  </li>
+</template>

package/src/components/button/Button.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+  import { computed, useSlots } from 'vue'
+  import { Primitive, type PrimitiveProps } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useAccessibleName } from '../../lib/a11y'
+  import { button, buttonIconBox, type ButtonVariants } from './button.variants'
+  import IconSlot from './IconSlot.vue'
+  import Ripple from '../ripple/Ripple.vue'
+  import Spinner from '../spinner/Spinner.vue'
+
+  defineOptions({ name: 'HnButton' })
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        variant?: ButtonVariants['variant']
+        tone?: ButtonVariants['tone']
+        size?: ButtonVariants['size']
+        type?: 'button' | 'submit' | 'reset'
+        iconOnly?: boolean
+        block?: boolean
+        pill?: boolean
+        loading?: boolean
+        disabled?: boolean
+        ripple?: boolean
+        class?: string
+      }
+    >(),
+    { as: 'button', type: 'button', ripple: true },
+  )
+
+  const slots = useSlots()
+
+  useAccessibleName('Button', () => !!props.iconOnly)
+
+  const isDisabled = computed(() => props.disabled || props.loading)
+  const isNativeButton = computed(() => props.as === 'button' && !props.asChild)
+
+  const spinnerAt = computed<'icon' | 'trailing' | 'center'>(() =>
+    slots.icon ? 'icon' : slots.trailing ? 'trailing' : 'center',
+  )
+
+  const withRipple = computed(() => props.ripple && props.variant !== 'link')
+
+  const nativeAttrs = computed(() => {
+    if (isNativeButton.value) {
+      return { type: props.type, disabled: isDisabled.value }
+    }
+    return isDisabled.value
+      ? { 'data-disabled': '', 'aria-disabled': 'true', tabindex: -1 }
+      : undefined
+  })
+
+  const spinnerSize = computed<'sm' | 'md'>(() => (props.size === 'lg' ? 'md' : 'sm'))
+  const iconBox = computed(() => buttonIconBox({ size: props.size }))
+
+  function guard(event: MouseEvent) {
+    if (!isDisabled.value) return
+    event.preventDefault()
+    event.stopImmediatePropagation()
+  }
+</script>
+
+<template>
+  <Primitive
+    :as="props.as"
+    :as-child="props.asChild"
+    v-bind="nativeAttrs"
+    :aria-busy="props.loading || undefined"
+    :data-loading="props.loading ? '' : undefined"
+    :class="
+      cn(
+        button({
+          variant: props.variant,
+          tone: props.tone,
+          size: props.size,
+          iconOnly: props.iconOnly,
+          block: props.block,
+          pill: props.pill,
+        }),
+        props.class,
+      )
+    "
+    @click.capture="guard"
+  >
+    <slot v-if="props.asChild" />
+    <template v-else>
+      <Ripple v-if="withRipple" :disabled="isDisabled" />
+
+      <IconSlot
+        v-if="slots.icon"
+        :box-class="iconBox"
+        :swapped="!!props.loading && spinnerAt === 'icon'"
+        :spinner-size="spinnerSize"
+      >
+        <slot name="icon" />
+      </IconSlot>
+
+      <span
+        v-if="slots.default"
+        class="hn-transition inline-flex items-center gap-[var(--hn-control-gap)]"
+        :class="props.loading && spinnerAt === 'center' ? 'opacity-0' : 'opacity-100'"
+      >
+        <slot />
+      </span>
+
+      <IconSlot
+        v-if="slots.trailing"
+        :box-class="iconBox"
+        :swapped="!!props.loading && spinnerAt === 'trailing'"
+        :spinner-size="spinnerSize"
+      >
+        <slot name="trailing" />
+      </IconSlot>
+
+      <Transition
+        enter-active-class="hn-transition-base"
+        enter-from-class="opacity-0"
+        leave-active-class="hn-transition"
+        leave-to-class="opacity-0"
+      >
+        <span
+          v-if="props.loading && spinnerAt === 'center'"
+          aria-hidden="true"
+          class="absolute inset-0 flex items-center justify-center"
+        >
+          <Spinner :size="spinnerSize" />
+        </span>
+      </Transition>
+    </template>
+  </Primitive>
+</template>

package/src/components/button/IconSlot.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+  import Spinner from '../spinner/Spinner.vue'
+
+  defineOptions({ name: 'HnButtonIconSlot' })
+
+  const props = defineProps<{
+    boxClass: string
+    swapped: boolean
+    spinnerSize: 'sm' | 'md'
+  }>()
+</script>
+
+<template>
+  <span :class="props.boxClass">
+    <span
+      class="hn-transition inline-flex items-center justify-center"
+      :class="props.swapped ? 'scale-90 opacity-0' : 'scale-100 opacity-100'"
+    >
+      <slot />
+    </span>
+    <Transition
+      enter-active-class="hn-transition-base"
+      enter-from-class="scale-90 opacity-0"
+      leave-active-class="hn-transition"
+      leave-to-class="scale-90 opacity-0"
+    >
+      <span
+        v-if="props.swapped"
+        aria-hidden="true"
+        class="absolute inset-0 inline-flex items-center justify-center"
+      >
+        <Spinner :size="props.spinnerSize" />
+      </span>
+    </Transition>
+  </span>
+</template>

package/src/components/button/button.variants.ts

@@ -0,0 +1,113 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const button = tv({
+  base: [
+    'hn-interactive relative isolate inline-flex shrink-0 items-center justify-center',
+    'gap-[var(--hn-control-gap)] rounded-md border border-transparent',
+    'font-medium whitespace-nowrap select-none',
+    'disabled:pointer-events-none disabled:opacity-50',
+    'data-disabled:pointer-events-none data-disabled:opacity-50',
+  ],
+  variants: {
+    variant: {
+      solid: 'hn-state-layer',
+      soft: 'hn-state-layer',
+      outline: 'hn-state-layer border-line hover:border-line-strong',
+      ghost: 'hn-state-layer',
+      link: 'hn-link hn-press-none',
+    },
+    tone: {
+      accent: '',
+      neutral: '',
+      danger: '',
+    },
+    size: {
+      sm: 'h-[var(--hn-control-h-sm)] px-[var(--hn-control-px-sm)] text-sm [&_svg]:size-3.5',
+      md: 'h-[var(--hn-control-h-md)] px-[var(--hn-control-px-md)] text-base [&_svg]:size-4',
+      lg: 'h-[var(--hn-control-h-lg)] px-[var(--hn-control-px-lg)] text-md [&_svg]:size-[1.125rem]',
+    },
+    iconOnly: {
+      true: 'aspect-square px-0',
+    },
+    block: {
+      true: 'w-full',
+    },
+    pill: {
+      true: 'rounded-full',
+    },
+  },
+  compoundVariants: [
+    {
+      variant: 'solid',
+      tone: 'accent',
+      class: 'bg-accent text-accent-on',
+    },
+    {
+      variant: 'solid',
+      tone: 'neutral',
+      class: 'bg-neutral-solid text-neutral-solid-on',
+    },
+    {
+      variant: 'solid',
+      tone: 'danger',
+      class: 'bg-danger text-danger-on',
+    },
+    {
+      variant: 'soft',
+      tone: 'accent',
+      class: 'bg-accent-soft text-accent-text',
+    },
+    { variant: 'soft', tone: 'neutral', class: 'bg-subtle text-fg' },
+    {
+      variant: 'soft',
+      tone: 'danger',
+      class: 'bg-danger-soft text-danger-text',
+    },
+    {
+      variant: 'outline',
+      tone: 'accent',
+      class: 'text-accent-text',
+    },
+    { variant: 'outline', tone: 'neutral', class: 'text-fg' },
+    {
+      variant: 'outline',
+      tone: 'danger',
+      class: 'text-danger-text',
+    },
+    {
+      variant: 'ghost',
+      tone: 'accent',
+      class: 'text-accent-text',
+    },
+    { variant: 'ghost', tone: 'neutral', class: 'text-fg' },
+    {
+      variant: 'ghost',
+      tone: 'danger',
+      class: 'text-danger-text',
+    },
+    { variant: 'link', tone: 'accent', class: '[--hn-link-color:var(--hn-accent-text)]' },
+    { variant: 'link', tone: 'neutral', class: '[--hn-link-color:var(--hn-fg-default)]' },
+    { variant: 'link', tone: 'danger', class: '[--hn-link-color:var(--hn-danger-text)]' },
+    { variant: 'link', class: 'h-auto rounded-none border-0 px-0' },
+    { size: 'lg', iconOnly: true, class: 'hn-press-lg' },
+  ],
+  defaultVariants: {
+    variant: 'solid',
+    tone: 'accent',
+    size: 'md',
+  },
+})
+
+export const buttonIconBox = tv({
+  base: 'relative inline-flex shrink-0 items-center justify-center',
+  variants: {
+    size: {
+      sm: 'size-3.5',
+      md: 'size-4',
+      lg: 'size-[1.125rem]',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type ButtonVariants = VariantProps<typeof button>

package/src/components/button-group/ButtonGroup.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+  import { cn } from '../../lib/cn'
+  import { buttonGroup, type ButtonGroupVariants } from './button-group.variants'
+
+  defineOptions({ name: 'HnButtonGroup' })
+
+  const props = withDefaults(
+    defineProps<{
+      label?: string
+      orientation?: ButtonGroupVariants['orientation']
+      block?: boolean
+      divider?: boolean
+      class?: string
+    }>(),
+    { orientation: 'horizontal', block: false, divider: false },
+  )
+</script>
+
+<template>
+  <div
+    role="group"
+    :aria-label="props.label"
+    :aria-orientation="props.orientation === 'vertical' ? 'vertical' : undefined"
+    :class="
+      cn(
+        buttonGroup({
+          orientation: props.orientation,
+          block: props.block,
+          divider: props.divider,
+        }),
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,51 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const buttonGroup = tv({
+  base: ['isolate align-middle', '[&>*]:[--hn-press-scale:1]', '[&>*:focus-visible]:z-10'],
+  variants: {
+    orientation: {
+      horizontal: [
+        '[&>*:not(:first-child)]:-ms-px',
+        '[&>*:not(:first-child)]:rounded-s-none',
+        '[&>*:not(:last-child)]:rounded-e-none',
+      ],
+      vertical: [
+        'flex-col',
+        '[&>*:not(:first-child)]:-mt-px',
+        '[&>*:not(:first-child)]:rounded-t-none',
+        '[&>*:not(:last-child)]:rounded-b-none',
+      ],
+    },
+    block: {
+      true: 'flex w-full [&>*]:flex-1',
+      false: 'inline-flex',
+    },
+    divider: {
+      true: [
+        '[&>*:not(:first-child)]:before:absolute',
+        '[&>*:not(:first-child)]:before:bg-current',
+        '[&>*:not(:first-child)]:before:opacity-25',
+      ],
+    },
+  },
+  compoundVariants: [
+    {
+      divider: true,
+      orientation: 'horizontal',
+      class:
+        '[&>*:not(:first-child)]:before:start-0 [&>*:not(:first-child)]:before:inset-y-1/4 [&>*:not(:first-child)]:before:w-px',
+    },
+    {
+      divider: true,
+      orientation: 'vertical',
+      class:
+        '[&>*:not(:first-child)]:before:top-0 [&>*:not(:first-child)]:before:inset-x-1/4 [&>*:not(:first-child)]:before:h-px',
+    },
+  ],
+  defaultVariants: {
+    orientation: 'horizontal',
+    block: false,
+  },
+})
+
+export type ButtonGroupVariants = VariantProps<typeof buttonGroup>

package/src/components/calendar/Calendar.vue

@@ -0,0 +1,159 @@
+<script setup lang="ts">
+  import { computed, shallowRef, watch } from 'vue'
+  import {
+    CalendarCell,
+    CalendarCellTrigger,
+    CalendarGrid,
+    CalendarGridBody,
+    CalendarGridHead,
+    CalendarGridRow,
+    CalendarHeadCell,
+    CalendarNext,
+    CalendarPrev,
+    CalendarRoot,
+  } from 'reka-ui'
+  import { getLocalTimeZone, today, type DateValue } from '@internationalized/date'
+  import { cn } from '../../lib/cn'
+  import { formatDateValue, parseDateValue } from '../../lib/date'
+  import { useUiLocale } from '../../locale'
+  import CalendarHeader from './CalendarHeader.vue'
+  import CalendarLevels from './CalendarLevels.vue'
+  import { useCalendarLevels } from './composables/useCalendarLevels'
+  import { formatMonthHeading } from './utils/format'
+  import {
+    calendarCell,
+    calendarDay,
+    calendarGrid,
+    calendarHeadCell,
+    calendarRoot,
+    type CalendarVariants,
+  } from './calendar.variants'
+
+  defineOptions({ name: 'HnCalendar' })
+
+  const props = withDefaults(
+    defineProps<{
+      min?: string
+      max?: string
+      unavailable?: (date: string) => boolean
+      weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6
+      weekdayFormat?: 'narrow' | 'short'
+      fixedWeeks?: boolean
+      size?: CalendarVariants['size']
+      autofocus?: boolean
+      readonly?: boolean
+      disabled?: boolean
+      class?: string
+    }>(),
+    { weekdayFormat: 'narrow', fixedWeeks: true, size: 'md' },
+  )
+
+  const model = defineModel<string | null>({ default: null })
+  const shown = defineModel<string>('placeholder')
+
+  const t = useUiLocale()
+  const root = shallowRef<{ $el: HTMLElement } | null>(null)
+
+  const value = computed(() => parseDateValue(model.value))
+  const placeholder = computed(() => parseDateValue(shown.value))
+  const minValue = computed(() => parseDateValue(props.min))
+  const maxValue = computed(() => parseDateValue(props.max))
+  const weekStartsOn = computed(() => props.weekStartsOn ?? t.value.calendar.weekStartsOn)
+  const unavailable = computed(() =>
+    props.unavailable ? (date: DateValue) => props.unavailable!(formatDateValue(date)) : undefined,
+  )
+
+  const { level, view, pickMonth, pickYear, followYear, back, onEntered } = useCalendarLevels(
+    value.value ?? placeholder.value ?? today(getLocalTimeZone()),
+    root,
+  )
+  watch(placeholder, next => {
+    if (next && next.compare(view.value) !== 0) view.value = next
+  })
+  watch(view, next => {
+    shown.value = formatDateValue(next)
+  })
+
+  const monthHeading = computed(() => formatMonthHeading(t.value.tag, view.value))
+
+  function update(next: DateValue | DateValue[] | undefined) {
+    const picked = Array.isArray(next) ? next[0] : next
+    model.value = picked ? formatDateValue(picked) : null
+  }
+</script>
+
+<template>
+  <CalendarRoot
+    ref="root"
+    v-slot="{ weekDays, grid }"
+    data-hn-calendar
+    :data-level="level"
+    :model-value="value"
+    :placeholder="view"
+    :min-value="minValue"
+    :max-value="maxValue"
+    :is-date-unavailable="unavailable"
+    :week-starts-on="weekStartsOn"
+    :weekday-format="props.weekdayFormat"
+    :fixed-weeks="props.fixedWeeks"
+    :initial-focus="props.autofocus"
+    :locale="t.tag"
+    :calendar-label="t.calendar.label"
+    :disabled="props.disabled"
+    :readonly="props.readonly"
+    :class="cn(calendarRoot({ size: props.size }), props.class)"
+    @update:model-value="update"
+    @update:placeholder="view = $event"
+  >
+    <CalendarLevels
+      v-model:level="level"
+      :view="view"
+      :size="props.size"
+      :min-value="minValue"
+      :max-value="maxValue"
+      :disabled="props.disabled"
+      @pick-month="pickMonth"
+      @pick-year="pickYear"
+      @follow-year="followYear"
+      @back="back"
+      @entered="onEntered"
+    >
+      <CalendarHeader
+        :prev="CalendarPrev"
+        :next="CalendarNext"
+        :prev-label="t.calendar.prev"
+        :next-label="t.calendar.next"
+        :heading="monthHeading"
+        :pick-label="t.calendar.pickMonth"
+        :size="props.size"
+        :disabled="props.disabled"
+        @pick="level = 'month'"
+      />
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()" :class="calendarGrid()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays"
+              :key="day"
+              :class="calendarHeadCell({ size: props.size })"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(week, index) in month.rows" :key="index">
+            <CalendarCell
+              v-for="day in week"
+              :key="day.toString()"
+              :date="day"
+              :class="calendarCell()"
+            >
+              <CalendarCellTrigger :day="day" :month="month.value" :class="calendarDay()" />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </CalendarLevels>
+  </CalendarRoot>
+</template>