@vestow/vue 0.1.0

package/src/components/speed-dial/SpeedDial.vue

@@ -0,0 +1,362 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type { ClassProps } from '../../lib/types'
+import type { SpeedDialDirection, SpeedDialItem, SpeedDialType } from './index'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { Plus } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { Button } from '../button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    /** Các mục bung ra. Mảng phẳng — SpeedDial không có submenu. */
+    model?: SpeedDialItem[]
+    type?: SpeedDialType
+    direction?: SpeedDialDirection
+    /** Bán kính quỹ đạo, tính bằng px. Chỉ dùng cho ba kiểu vòng cung. */
+    radius?: number
+    /** Độ trễ nối tiếp giữa hai mục, tính bằng ms. Đặt 0 thì bung cùng lúc. */
+    transitionDelay?: number
+    /** Phủ mờ phần còn lại của trang khi mở. */
+    mask?: boolean
+    hideOnClickOutside?: boolean
+    disabled?: boolean
+    /** Nút chính chỉ có icon nên bắt buộc phải có tên. */
+    ariaLabel?: string
+  }>(),
+  {
+    model: () => [],
+    type: 'linear',
+    direction: 'up',
+    radius: 80,
+    transitionDelay: 30,
+    mask: false,
+    hideOnClickOutside: true,
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{ 'update:visible': [value: boolean], 'click': [event: MouseEvent] }>()
+
+const { t } = useI18n()
+
+// Mặc định đi qua `t()` chứ không nằm trong `withDefaults` — default tính một
+// lần lúc dựng component nên đổi ngôn ngữ xong nó vẫn giữ chuỗi cũ.
+const ariaLabel = computed(() => props.ariaLabel ?? t('ui.speedDial.open'))
+
+const visible = defineModel<boolean>('visible', { default: false })
+
+const listId = useId()
+const root = ref<HTMLElement>()
+const itemRefs = ref<HTMLElement[]>([])
+/** -1 nghĩa là tiêu điểm đang ở nút chính, không ở mục nào. */
+const focusIndex = ref(-1)
+
+/**
+ * Kích thước cố định, KHÔNG lấy từ prop `size` của Button.
+ *
+ * Toạ độ từng mục phải tính bằng số trước khi trình duyệt vẽ, mà đọc kích thước
+ * thật thì phải chờ layout xong — chưa kể lúc đóng các mục đang chồng lên nhau.
+ * Chốt cứng hai con số rồi ép Button theo là cách duy nhất khớp được.
+ */
+const TRIGGER_SIZE = 36
+const ITEM_SIZE = 32
+/** Lệch để tâm mục trùng tâm nút chính. PrimeVue gọi là `--p-item-diff`. */
+const CENTER = (TRIGGER_SIZE - ITEM_SIZE) / 2
+/** Bước nhảy giữa hai mục ở kiểu `linear`. */
+const LINEAR_STEP = ITEM_SIZE + 8
+
+const DEG = Math.PI / 180
+
+/**
+ * Góc của mục thứ `index`, tính bằng độ.
+ *
+ * `circle` chia đều 360° nên mục cuối không trùng mục đầu — chia cho `n`. Hai
+ * kiểu cung hở thì mục đầu và mục cuối phải nằm đúng hai đầu mút, nên chia cho
+ * `n - 1`. Số đo lấy từ chính primevue.dev: 5 mục ⇒ circle 72°, semi 45°,
+ * quarter 22.5°.
+ */
+function angleOf(index: number): number {
+  const count = props.model.length
+  if (count < 2)
+    return 0
+
+  if (props.type === 'circle')
+    return (360 / count) * index
+
+  const sweep = props.type === 'semi-circle' ? 180 : 90
+  return (sweep / (count - 1)) * index
+}
+
+function placeLinear(index: number): [number, number] {
+  const d = (index + 1) * LINEAR_STEP
+
+  switch (props.direction) {
+    case 'down': return [0, d]
+    case 'left': return [-d, 0]
+    case 'right': return [d, 0]
+    default: return [0, -d]
+  }
+}
+
+/**
+ * Độ lệch của mục thứ `index` so với tâm nút chính, tính bằng px.
+ *
+ * Bốn hướng KHÔNG phải bốn phép xoay của cùng một công thức: hướng dọc lấy cos
+ * cho trục ngang, hướng ngang thì hai trục **đổi vai** cos/sin — nếu không, một
+ * nửa số hướng sẽ quét ngược. Số đo đối chiếu từng mục với primevue.dev.
+ */
+function place(index: number): [number, number] {
+  if (props.type === 'linear')
+    return placeLinear(index)
+
+  const angle = angleOf(index) * DEG
+  const cos = props.radius * Math.cos(angle)
+  const sin = props.radius * Math.sin(angle)
+
+  if (props.type === 'circle')
+    return [cos, sin]
+
+  if (props.type === 'semi-circle') {
+    switch (props.direction) {
+      case 'down': return [cos, sin]
+      case 'left': return [-sin, cos]
+      case 'right': return [sin, cos]
+      default: return [cos, -sin]
+    }
+  }
+
+  switch (props.direction) {
+    case 'up-left': return [-cos, -sin]
+    case 'down-left': return [-sin, cos]
+    case 'down-right': return [sin, cos]
+    default: return [cos, -sin]
+  }
+}
+
+/**
+ * Lúc mở thì mục gần nút chính hiện trước; lúc đóng thì thu về theo thứ tự
+ * ngược lại. Chạy xuôi cả hai chiều trông như cái đuôi bị đứt: mục xa biến mất
+ * trước rồi mới tới mục gần, ngược với hướng chuyển động.
+ */
+function delayOf(index: number): string {
+  const step = props.transitionDelay
+  const order = visible.value ? index : props.model.length - 1 - index
+  return `${order * step}ms`
+}
+
+/**
+ * Vị trí bằng `transform`, KHÔNG bằng `left/right/top/bottom`.
+ *
+ * Neo theo `bottom` hay `right` thì lúc đóng thuộc tính đối diện phải về
+ * `auto`, mà `auto` không nội suy được — mục **nhảy** thẳng tới đích thay vì
+ * trượt, và chỉ nhảy ở những hướng neo kiểu đó. Đã đo: hướng `up`/`left` giật,
+ * `down`/`right` mượt, cùng một component. Dịch bằng `transform` thì cả tám
+ * hướng chạy giống hệt nhau, lại không bắt trình duyệt tính lại layout.
+ */
+function styleOf(index: number): CSSProperties {
+  const [x, y] = visible.value ? place(index) : [0, 0]
+
+  return {
+    transform: `translate(${x.toFixed(3)}px, ${y.toFixed(3)}px) scale(${visible.value ? 1 : 0.5})`,
+    transitionDelay: delayOf(index),
+  }
+}
+
+function close(): void {
+  if (!visible.value)
+    return
+
+  visible.value = false
+  focusIndex.value = -1
+  emit('update:visible', false)
+}
+
+function toggle(event: MouseEvent): void {
+  emit('click', event)
+
+  if (props.disabled)
+    return
+
+  visible.value = !visible.value
+  focusIndex.value = -1
+  emit('update:visible', visible.value)
+}
+
+function run(item: SpeedDialItem): void {
+  if (item.disabled)
+    return
+
+  if (!item.url)
+    item.command?.(item)
+
+  close()
+}
+
+/** Đưa tiêu điểm tới mục thứ `next`, quay vòng ở hai đầu. */
+async function focusItem(next: number): Promise<void> {
+  const count = props.model.length
+  if (!count)
+    return
+
+  focusIndex.value = (next + count) % count
+  await nextTick()
+  itemRefs.value[focusIndex.value]?.focus()
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (!visible.value)
+    return
+
+  switch (event.key) {
+    case 'Escape':
+      close()
+      // Trả tiêu điểm về nút chính, nếu không nó rơi ra ngoài body.
+      root.value?.querySelector<HTMLElement>('[data-speed-dial-trigger]')?.focus()
+      break
+    case 'ArrowDown':
+    case 'ArrowRight':
+      event.preventDefault()
+      focusItem(focusIndex.value + 1)
+      break
+    case 'ArrowUp':
+    case 'ArrowLeft':
+      event.preventDefault()
+      focusItem(focusIndex.value <= 0 ? props.model.length - 1 : focusIndex.value - 1)
+      break
+    case 'Home':
+      event.preventDefault()
+      focusItem(0)
+      break
+    case 'End':
+      event.preventDefault()
+      focusItem(props.model.length - 1)
+      break
+  }
+}
+
+function onPointerDown(event: PointerEvent): void {
+  if (props.hideOnClickOutside && !root.value?.contains(event.target as Node))
+    close()
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', onPointerDown)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', onPointerDown)
+})
+
+// Danh sách đổi thì mảng ref cũ còn giữ node đã gỡ — dọn để phím mũi tên không
+// focus vào phần tử mồ côi.
+watch(() => props.model, () => {
+  itemRefs.value = []
+  focusIndex.value = -1
+})
+
+const rootStyle = computed<CSSProperties>(() => ({
+  width: `${TRIGGER_SIZE}px`,
+  height: `${TRIGGER_SIZE}px`,
+}))
+</script>
+
+<template>
+  <div
+    ref="root"
+    :class="cn('relative', props.class)"
+    :style="rootStyle"
+    @keydown="onKeydown"
+  >
+    <!--
+      Lớp phủ nằm trong chính component chứ không Teleport ra body: đặt z thấp
+      hơn nút và các mục là đủ, mà lại không phải lo portal khi component nằm
+      trong dialog.
+    -->
+    <div
+      v-if="mask"
+      class="fixed inset-0 -z-10 bg-foreground/40 backdrop-blur-[2px] transition-opacity duration-(--duration-base) motion-reduce:transition-none"
+      :class="visible ? 'opacity-100' : 'pointer-events-none opacity-0'"
+      aria-hidden="true"
+    />
+
+    <ul
+      :id="listId"
+      class="pointer-events-none absolute inset-0 m-0 list-none p-0"
+      role="menu"
+      :aria-label="ariaLabel"
+    >
+      <li
+        v-for="(item, index) in model"
+        :key="index"
+        class="absolute transition-[transform,opacity] duration-(--duration-base) ease-out motion-reduce:transition-none"
+        :class="visible ? 'opacity-100' : 'pointer-events-none opacity-0'"
+        :style="[{ left: `${CENTER}px`, top: `${CENTER}px` }, styleOf(index)]"
+        role="none"
+      >
+        <Tooltip v-if="item.label" :delay-duration="200">
+          <TooltipTrigger as-child>
+            <Button
+              :ref="el => { if (el) itemRefs[index] = (el as { $el: HTMLElement }).$el }"
+              :as="item.url ? 'a' : 'button'"
+              :href="item.url"
+              :target="item.target"
+              variant="secondary"
+              size="icon"
+              role="menuitem"
+              class="pointer-events-auto rounded-full shadow-md"
+              :tabindex="visible ? 0 : -1"
+              :disabled="item.disabled"
+              :aria-label="item.label"
+              @click="run(item)"
+            >
+              <component :is="item.icon" v-if="item.icon" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent :side="type === 'linear' && (direction === 'up' || direction === 'down') ? 'right' : 'top'">
+            {{ item.label }}
+          </TooltipContent>
+        </Tooltip>
+
+        <Button
+          v-else
+          :ref="el => { if (el) itemRefs[index] = (el as { $el: HTMLElement }).$el }"
+          :as="item.url ? 'a' : 'button'"
+          :href="item.url"
+          :target="item.target"
+          variant="secondary"
+          size="icon"
+          role="menuitem"
+          class="pointer-events-auto rounded-full shadow-md"
+          :tabindex="visible ? 0 : -1"
+          :disabled="item.disabled"
+          @click="run(item)"
+        >
+          <component :is="item.icon" v-if="item.icon" />
+        </Button>
+      </li>
+    </ul>
+
+    <Button
+      data-speed-dial-trigger
+      size="icon-lg"
+      class="relative rounded-full shadow-lg"
+      :disabled="disabled"
+      :aria-label="ariaLabel"
+      :aria-expanded="visible"
+      :aria-controls="listId"
+      aria-haspopup="menu"
+      @click="toggle"
+    >
+      <slot name="icon" :visible="visible">
+        <!-- Dấu cộng xoay 135° thành dấu nhân — cùng một icon, không đổi thẻ. -->
+        <Plus
+          class="transition-transform duration-(--duration-base) motion-reduce:transition-none"
+          :class="visible && 'rotate-[135deg]'"
+        />
+      </slot>
+    </Button>
+  </div>
+</template>

package/src/components/speed-dial/index.ts

@@ -0,0 +1,28 @@
+import type { MenuActionItem } from '../../lib/menu'
+
+export { default as SpeedDial } from './SpeedDial.vue'
+
+/**
+ * SpeedDial chỉ nhận mục **phẳng**: không đường kẻ, không submenu. Mỗi mục là
+ * một nút tròn nằm trên quỹ đạo quanh nút chính, không có chỗ cho cấp hai.
+ */
+export type SpeedDialItem = MenuActionItem
+
+/** Kiểu quỹ đạo các mục bung ra. */
+export type SpeedDialType = 'linear' | 'circle' | 'semi-circle' | 'quarter-circle'
+
+/**
+ * Hướng bung.
+ *
+ * `linear` và `semi-circle` dùng bốn hướng thẳng; `quarter-circle` dùng bốn
+ * hướng chéo. `circle` bỏ qua prop này vì nó bung kín 360°.
+ */
+export type SpeedDialDirection
+  = | 'up'
+    | 'down'
+    | 'left'
+    | 'right'
+    | 'up-left'
+    | 'up-right'
+    | 'down-left'
+    | 'down-right'

package/src/components/spinner/Spinner.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { LoaderCircle } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps & { label?: string }>()
+
+const { t } = useI18n()
+
+// Bỏ qua `withDefaults`: chuỗi mặc định phải đi qua `t()` mới đổi theo ngôn ngữ.
+const label = computed(() => props.label ?? t('ui.spinner.label'))
+</script>
+
+<template>
+  <span role="status" :aria-label="label" :class="cn('inline-flex items-center', props.class)">
+    <LoaderCircle class="size-4 animate-spin" aria-hidden="true" />
+  </span>
+</template>

package/src/components/spinner/index.ts

@@ -0,0 +1 @@
+export { default as Spinner } from './Spinner.vue'

package/src/components/splitter/Splitter.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { SplitterGroupEmits, SplitterGroupProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { SplitterGroup, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<SplitterGroupProps & ClassProps>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <!-- Chiều xếp do reka đặt inline theo `direction`; ở đây chỉ lo kích thước. -->
+  <SplitterGroup v-bind="forwarded" :class="cn('flex h-full w-full', props.class)">
+    <slot />
+  </SplitterGroup>
+</template>

package/src/components/splitter/SplitterHandle.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { SplitterResizeHandleEmits, SplitterResizeHandleProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { SplitterResizeHandle, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { GripVertical } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<SplitterResizeHandleProps & ClassProps & {
+  /** Hiện ô chấm ở giữa. Bật khi tay cầm nằm giữa hai mặt phẳng cùng màu. */
+  grip?: boolean
+}>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, grip: _grip, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <SplitterResizeHandle
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex w-px shrink-0 items-center justify-center bg-border',
+      // Đường kẻ dày 1px, nhưng vùng bắt chuột dày 9px — kéo được một đường
+      // tóc là bài kiểm tra độ chính xác, không phải một giao diện.
+      'after:absolute after:inset-y-0 after:left-1/2 after:w-[9px] after:-translate-x-1/2',
+      // Vòng focus kiểu ô lịch, không phải `focusRing`: tay cầm không có viền
+      // để đổi màu, mà `focusRing` thì làm đúng việc đó.
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      'data-[state=drag]:bg-ring',
+      // Nhóm dọc: kẻ nằm ngang, mọi thứ xoay 90°.
+      'data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full',
+      'data-[orientation=vertical]:after:inset-x-0 data-[orientation=vertical]:after:left-0',
+      'data-[orientation=vertical]:after:h-[9px] data-[orientation=vertical]:after:w-full',
+      'data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0',
+      props.class,
+    )"
+  >
+    <span
+      v-if="props.grip"
+      class="z-(--z-raised) grid h-4 w-3 place-items-center rounded-xs border border-border bg-border text-muted-foreground data-[orientation=vertical]:rotate-90"
+    >
+      <GripVertical class="size-2.5" />
+    </span>
+    <slot />
+  </SplitterResizeHandle>
+</template>

package/src/components/splitter/SplitterPanel.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { SplitterPanelEmits, SplitterPanelProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { SplitterPanel, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<SplitterPanelProps & ClassProps>()
+const emits = defineEmits<SplitterPanelEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <!--
+    `overflow-hidden` là bắt buộc, không phải cho đẹp.
+
+    reka đặt kích thước panel bằng `flex-grow`, nên nội dung rộng hơn phần đã
+    chia sẽ **đẩy panel giãn ra** thay vì bị cắt — kéo tay cầm về một phía là
+    panel bên kia không chịu co lại, trông như thanh chia bị kẹt.
+  -->
+  <SplitterPanel v-bind="forwarded" :class="cn('overflow-hidden', props.class)">
+    <slot />
+  </SplitterPanel>
+</template>

package/src/components/splitter/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Vùng chia được, kéo tay cầm để đổi tỉ lệ.
+ *
+ * PrimeVue gọi là `Splitter`, shadcn gọi là `Resizable`. Lấy tên PrimeVue vì
+ * danh mục component của repo xếp theo phân loại bên đó.
+ *
+ * Tay cầm phải khai TƯỜNG MINH giữa hai panel — reka không tự chèn. Đổi lại,
+ * `Splitter` lồng trong `SplitterPanel` là ra lưới hai chiều mà không cần API
+ * riêng nào.
+ */
+
+export { default as Splitter } from './Splitter.vue'
+export { default as SplitterHandle } from './SplitterHandle.vue'
+export { default as SplitterPanel } from './SplitterPanel.vue'

package/src/components/stepper/Stepper.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { StepperRootEmits, StepperRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { StepperRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<StepperRootProps & ClassProps>(),
+  { orientation: 'horizontal' },
+)
+
+const emits = defineEmits<StepperRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <StepperRoot
+    v-bind="forwarded"
+    :class="cn(
+      'flex w-full',
+      props.orientation === 'vertical' ? 'flex-col' : 'items-start',
+      props.class,
+    )"
+  >
+    <slot />
+  </StepperRoot>
+</template>

package/src/components/stepper/StepperItem.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import type { StepperItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import {
+  StepperDescription,
+  StepperItem,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+} from 'reka-ui'
+import { computed } from 'vue'
+import { Check } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<StepperItemProps & ClassProps & {
+    title?: string
+    description?: string
+    /** Bước cuối không vẽ đoạn kẻ nối. */
+    last?: boolean
+    orientation?: 'horizontal' | 'vertical'
+  }>(),
+  { last: false, orientation: 'horizontal' },
+)
+
+const delegated = computed(() => {
+  const {
+    class: _class,
+    title: _title,
+    description: _description,
+    last: _last,
+    orientation: _orientation,
+    ...rest
+  } = props
+  return rest
+})
+
+/**
+ * Bước đã xong hiện dấu tick thay cho số.
+ *
+ * Reka phơi `data-state` là `completed` / `active` / `inactive`. Đổi số thành
+ * tick là cách duy nhất phân biệt được "đã xong" với "đang làm" mà không cần
+ * đến màu — người không phân biệt được màu vẫn đọc ra.
+ */
+const indicator = cn(
+  'grid size-8 shrink-0 place-items-center rounded-full border text-sm font-medium transition-colors',
+  'group-data-[state=inactive]/step:border-border group-data-[state=inactive]/step:text-muted-foreground',
+  'group-data-[state=active]/step:border-primary group-data-[state=active]/step:bg-primary group-data-[state=active]/step:text-primary-foreground',
+  'group-data-[state=completed]/step:border-primary group-data-[state=completed]/step:bg-primary group-data-[state=completed]/step:text-primary-foreground',
+)
+
+const separator = cn(
+  'bg-border transition-colors',
+  'group-data-[state=completed]/step:bg-primary',
+)
+</script>
+
+<template>
+  <StepperItem
+    v-bind="delegated"
+    :class="cn(
+      'group/step relative flex',
+      props.orientation === 'vertical' ? 'gap-3 pb-6 last:pb-0' : 'flex-1 flex-col items-center gap-2 last:flex-none',
+      props.class,
+    )"
+  >
+    <!--
+      Ngang: đoạn kẻ nằm NGANG HÀNG với vòng tròn, không nằm dưới nhãn — nên nó
+      phải tuyệt đối, vì nhãn bên dưới có thể dài ngắn khác nhau và sẽ đẩy đoạn
+      kẻ lệch nếu để nó chảy theo dòng.
+    -->
+    <StepperSeparator
+      v-if="!props.last"
+      :class="props.orientation === 'vertical'
+        ? cn('absolute left-4 top-9 bottom-2 w-px -translate-x-1/2', separator)
+        : cn('absolute left-[calc(50%+1.5rem)] right-[calc(-50%+1.5rem)] top-4 h-px -translate-y-1/2', separator)"
+    />
+
+    <StepperTrigger
+      :class="cn(
+        'relative z-(--z-raised) flex rounded-full outline-none',
+        'focus-visible:ring-2 focus-visible:ring-ring',
+        'disabled:pointer-events-none disabled:opacity-50',
+      )"
+    >
+      <span :class="indicator">
+        <Check v-if="props.step !== undefined" class="hidden size-4 group-data-[state=completed]/step:block" />
+        <span class="group-data-[state=completed]/step:hidden"><slot name="indicator">{{ props.step }}</slot></span>
+      </span>
+    </StepperTrigger>
+
+    <div
+      :class="cn(
+        'flex min-w-0 flex-col gap-0.5',
+        props.orientation === 'vertical' ? 'pt-1' : 'items-center text-center',
+      )"
+    >
+      <StepperTitle class="text-sm font-medium group-data-[state=inactive]/step:text-muted-foreground">
+        <slot name="title">
+          {{ props.title }}
+        </slot>
+      </StepperTitle>
+      <StepperDescription
+        v-if="props.description || $slots.description"
+        class="text-xs leading-relaxed text-muted-foreground"
+      >
+        <slot name="description">
+          {{ props.description }}
+        </slot>
+      </StepperDescription>
+    </div>
+  </StepperItem>
+</template>

package/src/components/stepper/index.ts

@@ -0,0 +1,2 @@
+export { default as Stepper } from './Stepper.vue'
+export { default as StepperItem } from './StepperItem.vue'