@hina-ui/vue 1.7.2 → 1.7.3

package/src/components/stepper/Stepper.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts" generic="T extends StepperItem = StepperItem">
+  import { StepperRoot } from 'reka-ui'
+  import { useId } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useDirection } from '../../lib/useDirection'
+  import { useUiLocale } from '../../locale'
+  import StepperStep from './StepperStep.vue'
+  import { stepper } from './stepper.variants'
+  import { useStepper } from './composables/useStepper'
+  import type { StepperItem, StepperNavigation, StepperProps, StepperSlotProps } from './types'
+
+  defineOptions({ name: 'HnStepper' })
+  const props = withDefaults(defineProps<StepperProps<T>>(), {
+    defaultValue: 1,
+    orientation: 'horizontal',
+    linear: true,
+  })
+  const emit = defineEmits<{ 'update:modelValue': [step: number]; error: [error: unknown] }>()
+  const slots = defineSlots<{
+    default?(props: StepperNavigation<T>): unknown
+    indicator?(props: StepperSlotProps<T>): unknown
+    title?(props: StepperSlotProps<T>): unknown
+    description?(props: StepperSlotProps<T>): unknown
+  }>()
+  const t = useUiLocale()
+  const id = useId()
+  const { root, direction, rootDirection } = useDirection(() => props.dir)
+  const { step, pending, entries, navigation, next, prev, goTo, canNext, canPrev } = useStepper(
+    props,
+    value => emit('update:modelValue', value),
+    error => emit('error', error),
+  )
+
+  defineExpose({ step, pending, next, prev, goTo, canNext, canPrev })
+</script>
+
+<template>
+  <div
+    ref="root"
+    data-hn-stepper
+    :dir="rootDirection"
+    :class="cn(stepper({ size: props.size }), props.class)"
+    :aria-busy="pending || undefined"
+  >
+    <StepperRoot
+      :model-value="step"
+      :orientation="props.orientation"
+      :dir="direction"
+      :linear="props.linear"
+      :aria-label="props.label ?? t.stepper.label"
+      class="min-w-0 [&>[role=status]]:hidden"
+      @update:model-value="value => value !== undefined && goTo(value)"
+    >
+      <ol
+        role="list"
+        class="hn-stepper-list m-0 grid min-w-0 list-none p-0"
+        :data-orientation="props.orientation"
+      >
+        <StepperStep
+          v-for="entry in entries"
+          :id="`${id}-${entry.step}`"
+          :key="entry.step"
+          :entry="entry"
+          :orientation="props.orientation"
+          :pending="pending"
+          :last="entry.step === entries.length"
+          :panel-id="slots.default ? `${id}-panel` : undefined"
+          @select="goTo"
+        >
+          <template v-if="slots.indicator" #indicator="scope">
+            <slot name="indicator" v-bind="scope" />
+          </template>
+          <template v-if="slots.title" #title="scope">
+            <slot name="title" v-bind="scope" />
+          </template>
+          <template v-if="slots.description" #description="scope">
+            <slot name="description" v-bind="scope" />
+          </template>
+        </StepperStep>
+      </ol>
+    </StepperRoot>
+    <div
+      v-if="slots.default"
+      :id="`${id}-panel`"
+      :role="step ? 'region' : undefined"
+      :aria-labelledby="step ? `${id}-${step}-title` : undefined"
+      class="min-w-0"
+    >
+      <slot v-bind="navigation" />
+    </div>
+    <span v-if="entries.length" class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+      {{ t.stepper.progress(step, entries.length) }}
+    </span>
+  </div>
+</template>

package/src/components/stepper/StepperStep.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts" generic="T extends StepperItem = StepperItem">
+  import { CircleAlert, Check } from '@lucide/vue'
+  import {
+    StepperItem as RekaStepperItem,
+    StepperTrigger,
+    StepperTitle,
+    StepperDescription,
+    StepperIndicator,
+    StepperSeparator,
+  } from 'reka-ui'
+  import { useUiLocale } from '../../locale'
+  import Spinner from '../spinner/Spinner.vue'
+  import { stepperIndicator, stepperTrigger } from './stepper.variants'
+  import type { StepperItem, StepperSlotProps, StepperOrientation } from './types'
+
+  const props = defineProps<{
+    entry: StepperSlotProps<T>
+    id: string
+    panelId?: string
+    pending: boolean
+    last: boolean
+    orientation: StepperOrientation
+  }>()
+  const emit = defineEmits<{ select: [step: number] }>()
+  const slots = defineSlots<{
+    indicator?(props: StepperSlotProps<T>): unknown
+    title?(props: StepperSlotProps<T>): unknown
+    description?(props: StepperSlotProps<T>): unknown
+  }>()
+  const t = useUiLocale()
+</script>
+
+<template>
+  <RekaStepperItem
+    as="li"
+    :step="entry.step"
+    :disabled="entry.disabled"
+    :completed="entry.state === 'completed'"
+    :aria-current="undefined"
+    :data-hn-state="entry.state"
+    class="hn-stepper-item min-w-0"
+  >
+    <StepperTrigger
+      :id="`${id}-trigger`"
+      :aria-labelledby="`${id}-title`"
+      :aria-describedby="
+        [
+          entry.item.description || slots.description ? `${id}-description` : undefined,
+          entry.state === 'error' || entry.state === 'completed' ? `${id}-status` : undefined,
+        ]
+          .filter(Boolean)
+          .join(' ') || undefined
+      "
+      :aria-controls="panelId"
+      :aria-current="entry.active ? 'step' : undefined"
+      :aria-disabled="props.pending || undefined"
+      :data-disabled="entry.disabled || props.pending ? '' : undefined"
+      :class="stepperTrigger({ orientation: props.orientation })"
+      @mousedown.capture.stop
+      @click="emit('select', entry.step)"
+    >
+      <StepperIndicator :class="stepperIndicator({ state: entry.state })" aria-hidden="true">
+        <slot name="indicator" v-bind="entry">
+          <Spinner v-if="props.pending && entry.active" size="sm" />
+          <CircleAlert v-else-if="entry.state === 'error'" />
+          <Check v-else-if="entry.state === 'completed'" />
+          <template v-else>{{ entry.step }}</template>
+        </slot>
+      </StepperIndicator>
+      <span class="flex min-w-0 flex-1 flex-col justify-center gap-1 self-stretch wrap-anywhere">
+        <StepperTitle
+          as="span"
+          :id="`${id}-title`"
+          class="font-medium"
+          :class="entry.state === 'error' ? 'text-danger-text' : undefined"
+        >
+          <slot name="title" v-bind="entry">{{ entry.item.title }}</slot>
+        </StepperTitle>
+        <StepperDescription
+          v-if="entry.item.description || slots.description"
+          as="span"
+          :id="`${id}-description`"
+          class="text-muted text-xs"
+        >
+          <slot name="description" v-bind="entry">{{ entry.item.description }}</slot>
+        </StepperDescription>
+        <span
+          v-if="entry.state === 'error' || entry.state === 'completed'"
+          :id="`${id}-status`"
+          class="sr-only"
+        >
+          {{ entry.state === 'error' ? t.stepper.error : t.stepper.completed }}
+        </span>
+      </span>
+    </StepperTrigger>
+    <StepperSeparator
+      v-if="!props.last"
+      class="hn-stepper-separator hn-transition-base"
+      :class="entry.state === 'completed' ? 'bg-accent' : 'bg-line'"
+    />
+  </RekaStepperItem>
+</template>

package/src/components/stepper/composables/useStepper.ts

@@ -0,0 +1,112 @@
+import { useVModel } from '@vueuse/core'
+import { computed, onScopeDispose, ref, watch } from 'vue'
+import type { StepperItem, StepperNavigation, StepperProps, StepperSlotProps } from '../types'
+
+export function useStepper<T extends StepperItem>(
+  props: StepperProps<T>,
+  update: (step: number) => void,
+  onError: (error: unknown) => void,
+) {
+  const model = useVModel(props, 'modelValue', (_, value) => update(value!), {
+    defaultValue: props.defaultValue ?? 1,
+    passive: (props.modelValue === undefined) as false,
+  })
+  const pending = ref(false)
+  const total = computed(() => props.items.length)
+  const step = computed(() =>
+    total.value
+      ? Math.min(
+          total.value,
+          Math.max(1, Math.floor(Number.isFinite(model.value) ? model.value! : 1)),
+        )
+      : 0,
+  )
+  let version = 0
+
+  function invalidate() {
+    version++
+    pending.value = false
+  }
+
+  watch(
+    [
+      model,
+      () => JSON.stringify(props.items.map(item => [item.title, !!item.disabled])),
+      () => props.disabled,
+      () => props.linear,
+      () => props.beforeChange,
+    ],
+    invalidate,
+    { flush: 'sync' },
+  )
+  onScopeDispose(invalidate)
+
+  function available(target: number) {
+    return (
+      Number.isInteger(target) &&
+      target >= 1 &&
+      target <= total.value &&
+      !props.disabled &&
+      !props.items[target - 1]?.disabled &&
+      (props.linear === false || target <= step.value + 1)
+    )
+  }
+
+  const canNext = computed(() => !pending.value && step.value > 0 && available(step.value + 1))
+  const canPrev = computed(() => !pending.value && available(step.value - 1))
+
+  async function goTo(target: number) {
+    if (pending.value || !available(target) || target === step.value) return false
+    const ticket = ++version
+    const from = step.value
+    try {
+      if (props.beforeChange) {
+        pending.value = true
+        const allowed = await props.beforeChange(target, from)
+        if (allowed === false) return false
+      }
+      if (ticket !== version || from !== step.value || !available(target)) return false
+      pending.value = false
+      model.value = target
+      return true
+    } catch (error) {
+      if (ticket === version) onError(error)
+      return false
+    } finally {
+      if (ticket === version) pending.value = false
+    }
+  }
+
+  const next = () => goTo(step.value + 1)
+  const prev = () => goTo(step.value - 1)
+  const entries = computed<StepperSlotProps<T>[]>(() =>
+    props.items.map((item, index) => ({
+      item,
+      index,
+      step: index + 1,
+      active: step.value === index + 1,
+      pending: pending.value && step.value === index + 1,
+      disabled: !available(index + 1),
+      state: item.error
+        ? 'error'
+        : item.completed || index + 1 < step.value
+          ? 'completed'
+          : index + 1 === step.value
+            ? 'active'
+            : 'inactive',
+    })),
+  )
+  const navigation = computed<StepperNavigation<T>>(() => ({
+    step: step.value,
+    item: props.items[step.value - 1],
+    total: total.value,
+    pending: pending.value,
+    canNext: canNext.value,
+    canPrev: canPrev.value,
+    next,
+    prev,
+    goTo,
+  }))
+
+  return { step, pending, entries, navigation, next, prev, goTo, canNext, canPrev }
+}

package/src/components/stepper/stepper.variants.ts

@@ -0,0 +1,39 @@
+import { tv } from '../../lib/tv'
+
+export const stepper = tv({
+  base: 'flex w-full min-w-0 flex-col gap-(--hn-stack-gap)',
+  variants: {
+    size: {
+      sm: 'text-sm [--hn-stepper-indicator:var(--hn-control-h-sm)]',
+      md: 'text-sm [--hn-stepper-indicator:var(--hn-control-h-md)]',
+      lg: 'text-base [--hn-stepper-indicator:var(--hn-control-h-lg)]',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const stepperTrigger = tv({
+  base: [
+    'hn-focus-ring cursor-pointer text-fg relative flex min-w-0 gap-(--hn-inline-gap) rounded-md p-1',
+    'disabled:cursor-not-allowed disabled:opacity-50 data-disabled:cursor-not-allowed',
+  ],
+  variants: {
+    orientation: {
+      horizontal: 'w-full flex-col items-center text-center',
+      vertical: 'items-start text-start',
+    },
+  },
+})
+
+export const stepperIndicator = tv({
+  base: 'hn-transition-base flex size-(--hn-stepper-indicator) shrink-0 items-center justify-center rounded-full border text-sm font-medium tabular-nums [&_svg]:size-[1em]',
+  variants: {
+    state: {
+      inactive: 'border-line text-muted bg-surface',
+      active: 'border-accent bg-accent text-accent-on',
+      completed: 'border-transparent bg-accent-soft text-accent-text',
+      error: 'border-danger bg-danger-soft text-danger-text',
+    },
+  },
+  defaultVariants: { state: 'inactive' },
+})

package/src/components/stepper/types.ts

@@ -0,0 +1,51 @@
+export type StepperOrientation = 'horizontal' | 'vertical'
+export type StepperSize = 'sm' | 'md' | 'lg'
+export type StepperState = 'inactive' | 'active' | 'completed' | 'error'
+export type StepperBeforeChange = (
+  step: number,
+  previousStep: number,
+) => boolean | void | Promise<boolean | void>
+
+export interface StepperItem {
+  title: string
+  description?: string
+  disabled?: boolean
+  completed?: boolean
+  error?: boolean
+}
+
+export interface StepperProps<T extends StepperItem = StepperItem> {
+  items: T[]
+  modelValue?: number
+  defaultValue?: number
+  orientation?: StepperOrientation
+  size?: StepperSize
+  linear?: boolean
+  disabled?: boolean
+  beforeChange?: StepperBeforeChange
+  label?: string
+  dir?: 'ltr' | 'rtl'
+  class?: string
+}
+
+export interface StepperSlotProps<T extends StepperItem = StepperItem> {
+  item: T
+  index: number
+  step: number
+  state: StepperState
+  active: boolean
+  pending: boolean
+  disabled: boolean
+}
+
+export interface StepperNavigation<T extends StepperItem = StepperItem> {
+  step: number
+  item: T | undefined
+  total: number
+  pending: boolean
+  canNext: boolean
+  canPrev: boolean
+  next: () => Promise<boolean>
+  prev: () => Promise<boolean>
+  goTo: (step: number) => Promise<boolean>
+}

package/src/components/timeline/Timeline.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts" generic="T extends TimelineItem = TimelineItem">
+  import { computed } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { timeline, timelineMarker } from './timeline.variants'
+  import type {
+    TimelineAlign,
+    TimelineItem,
+    TimelineOrientation,
+    TimelineSize,
+    TimelineSlotProps,
+    TimelineTone,
+  } from './types'
+
+  defineOptions({ name: 'HnTimeline' })
+
+  const props = withDefaults(
+    defineProps<{
+      items: T[]
+      orientation?: TimelineOrientation
+      align?: TimelineAlign
+      size?: TimelineSize
+      tone?: TimelineTone
+      timePosition?: 'content' | 'opposite'
+      reverse?: boolean
+      class?: string
+    }>(),
+    { orientation: 'vertical', align: 'start', timePosition: 'content', reverse: false },
+  )
+
+  const slots = defineSlots<{
+    marker?(props: TimelineSlotProps<T>): unknown
+    title?(props: TimelineSlotProps<T>): unknown
+    description?(props: TimelineSlotProps<T>): unknown
+    time?(props: TimelineSlotProps<T>): unknown
+    content?(props: TimelineSlotProps<T>): unknown
+    opposite?(props: TimelineSlotProps<T>): unknown
+  }>()
+
+  const entries = computed(() => (props.reverse ? [...props.items].reverse() : props.items))
+  function hasOpposite() {
+    return (
+      !!slots.opposite ||
+      (props.timePosition === 'opposite' && (!!slots.time || props.items.some(item => item.time)))
+    )
+  }
+</script>
+
+<template>
+  <ol
+    data-hn-timeline
+    role="list"
+    :data-orientation="props.orientation"
+    :data-align="props.align"
+    :data-opposite="hasOpposite() || undefined"
+    :class="cn(timeline({ size: props.size }), props.class)"
+  >
+    <li
+      v-for="(item, index) in entries"
+      :key="item.id ?? index"
+      class="hn-timeline-item min-w-0"
+      :data-side="
+        props.align === 'end' || (props.align === 'alternate' && index % 2 === 1) ? 'end' : 'start'
+      "
+    >
+      <div v-if="hasOpposite()" class="hn-timeline-opposite text-muted min-w-0 wrap-anywhere">
+        <slot name="opposite" :item="item" :index="index">
+          <slot v-if="props.timePosition === 'opposite'" name="time" :item="item" :index="index">
+            <component
+              :is="item.dateTime ? 'time' : 'span'"
+              v-if="item.time"
+              :datetime="item.dateTime"
+              class="text-xs tabular-nums"
+            >
+              {{ item.time }}
+            </component>
+          </slot>
+        </slot>
+      </div>
+      <div class="hn-timeline-separator" aria-hidden="true">
+        <span :class="timelineMarker({ tone: item.tone ?? props.tone })">
+          <slot name="marker" :item="item" :index="index">
+            <span class="bg-surface size-2.5 rounded-full border-2 border-current" />
+          </slot>
+        </span>
+        <span v-if="index < entries.length - 1" class="hn-timeline-connector bg-line" />
+      </div>
+      <div class="hn-timeline-content min-w-0 wrap-anywhere">
+        <slot name="content" :item="item" :index="index">
+          <div
+            v-if="props.timePosition === 'content' && (item.time || slots.time)"
+            class="text-muted mb-1 text-xs tabular-nums"
+          >
+            <slot name="time" :item="item" :index="index">
+              <component :is="item.dateTime ? 'time' : 'span'" :datetime="item.dateTime">
+                {{ item.time }}
+              </component>
+            </slot>
+          </div>
+          <div v-if="item.title || slots.title" class="font-medium">
+            <slot name="title" :item="item" :index="index">{{ item.title }}</slot>
+          </div>
+          <div v-if="item.description || slots.description" class="text-muted mt-1">
+            <slot name="description" :item="item" :index="index">{{ item.description }}</slot>
+          </div>
+        </slot>
+      </div>
+    </li>
+  </ol>
+</template>

package/src/components/timeline/timeline.variants.ts

@@ -0,0 +1,31 @@
+import { tv, type VariantProps } from '../../lib/tv'
+
+export const timeline = tv({
+  base: 'hn-timeline text-fg m-0 grid w-full min-w-0 list-none p-0',
+  variants: {
+    size: {
+      sm: 'text-xs [--hn-timeline-gap:var(--hn-stack-gap)]',
+      md: 'text-sm [--hn-timeline-gap:calc(var(--hn-stack-gap)*1.5)]',
+      lg: 'text-base [--hn-timeline-gap:calc(var(--hn-stack-gap)*2)]',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export const timelineMarker = tv({
+  base: 'hn-timeline-marker flex shrink-0 items-center justify-center [&_svg]:size-[1em]',
+  variants: {
+    tone: {
+      accent: 'text-accent-text',
+      neutral: 'text-muted',
+      success: 'text-success-text',
+      warning: 'text-warning-text',
+      danger: 'text-danger-text',
+      info: 'text-info-text',
+    },
+  },
+  defaultVariants: { tone: 'accent' },
+})
+
+export type TimelineVariants = VariantProps<typeof timeline>
+export type TimelineMarkerVariants = VariantProps<typeof timelineMarker>

package/src/components/timeline/types.ts

@@ -0,0 +1,20 @@
+import type { TimelineVariants, TimelineMarkerVariants } from './timeline.variants'
+
+export type TimelineTone = NonNullable<TimelineMarkerVariants['tone']>
+export type TimelineSize = NonNullable<TimelineVariants['size']>
+export type TimelineOrientation = 'vertical' | 'horizontal'
+export type TimelineAlign = 'start' | 'end' | 'alternate'
+
+export interface TimelineItem {
+  id?: string | number
+  title?: string
+  description?: string
+  time?: string
+  dateTime?: string
+  tone?: TimelineTone
+}
+
+export interface TimelineSlotProps<T extends TimelineItem = TimelineItem> {
+  item: T
+  index: number
+}

package/src/components/toolbar/Toolbar.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+  import { toRef } from 'vue'
+  import { ToolbarRoot } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { useAccessibleName } from '../../lib/a11y'
+  import { useDirection } from '../../lib/useDirection'
+  import { provideToolbar } from './context'
+  import { toolbar } from './toolbar.variants'
+  import type { ToolbarProps } from './types'
+
+  defineOptions({ name: 'HnToolbar' })
+
+  const props = withDefaults(defineProps<ToolbarProps>(), {
+    orientation: 'horizontal',
+    loop: true,
+    disabled: false,
+    size: 'md',
+    variant: 'primary',
+  })
+  const { root, direction, rootDirection } = useDirection(() => props.dir)
+
+  provideToolbar({
+    orientation: toRef(props, 'orientation'),
+    size: toRef(props, 'size'),
+    disabled: toRef(props, 'disabled'),
+  })
+  useAccessibleName('Toolbar', () => !props.label)
+  defineSlots<{ default(): unknown }>()
+</script>
+
+<template>
+  <ToolbarRoot
+    as-child
+    :orientation="props.orientation"
+    :dir="direction"
+    :loop="props.loop"
+    :aria-label="props.label"
+    :aria-disabled="props.disabled || undefined"
+    :class="cn(toolbar({ orientation: props.orientation, variant: props.variant }), props.class)"
+  >
+    <div ref="root" :dir="rootDirection" data-hn-toolbar>
+      <slot />
+    </div>
+  </ToolbarRoot>
+</template>

package/src/components/toolbar/ToolbarButton.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import { computed } from 'vue'
+  import { ToolbarButton as RekaToolbarButton } from 'reka-ui'
+  import ToolbarControl from './ToolbarControl.vue'
+  import { useToolbar } from './context'
+  import type { ToolbarControlProps } from './types'
+
+  defineOptions({ name: 'HnToolbarButton', inheritAttrs: false })
+  const props = withDefaults(defineProps<ToolbarControlProps>(), { tooltip: true, ripple: true })
+  const toolbar = useToolbar()
+  const disabled = computed(() => toolbar.disabled.value || props.disabled || props.loading)
+</script>
+
+<template>
+  <RekaToolbarButton as-child :as="props.as" :disabled="disabled">
+    <ToolbarControl
+      v-bind="{ ...$attrs, ...props }"
+      :disabled="disabled"
+      :size="props.size ?? toolbar.size.value"
+    >
+      <template v-for="(_, name) in $slots" #[name]>
+        <slot :name="name" />
+      </template>
+    </ToolbarControl>
+  </RekaToolbarButton>
+</template>

package/src/components/toolbar/ToolbarControl.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+  import { injectTooltipProviderContext } from 'reka-ui'
+  import { Passthrough } from '../../lib/passthrough'
+  import Button from '../button/Button.vue'
+  import Tooltip from '../tooltip/Tooltip.vue'
+  import type { ToolbarControlProps } from './types'
+
+  defineOptions({ inheritAttrs: false })
+
+  const props = withDefaults(defineProps<ToolbarControlProps>(), {
+    as: 'button',
+    tooltip: true,
+    side: 'top',
+    variant: 'ghost',
+    tone: 'neutral',
+    ripple: true,
+  })
+  const Wrapper = injectTooltipProviderContext(null) ? Tooltip : Passthrough
+</script>
+
+<template>
+  <Wrapper
+    :disabled="!props.tooltip || !props.label"
+    :content="props.label ?? ''"
+    :side="props.side"
+  >
+    <Button
+      v-bind="$attrs"
+      :as="props.as"
+      :as-child="props.asChild"
+      :aria-label="props.label"
+      :icon-only="!!props.label"
+      :size="props.size"
+      :variant="props.variant"
+      :tone="props.tone"
+      :disabled="props.disabled"
+      :loading="props.loading"
+      :ripple="props.ripple"
+      :class="props.class"
+    >
+      <template v-for="(_, name) in $slots" #[name]>
+        <slot :name="name" />
+      </template>
+    </Button>
+  </Wrapper>
+</template>