@vestow/vue 0.1.0

package/src/components/timeline/TimelineItem.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { TimelineMarkerVariants } from './index'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { injectTimelineContext, timelineMarkerVariants } from './index'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    variant?: TimelineMarkerVariants['variant']
+    title?: string
+    /** Thời điểm, hiện mờ bên phải tiêu đề. */
+    time?: string
+    /** Mục cuối không vẽ đoạn kẻ nối xuống dưới. */
+    last?: boolean
+  }>(),
+  { variant: 'default', last: false },
+)
+
+const timeline = injectTimelineContext(null)
+const size = computed(() => timeline?.size.value ?? 'default')
+
+/**
+ * Đoạn kẻ nối vẽ bằng một div tuyệt đối, KHÔNG phải `border-l` trên cả mục.
+ *
+ * Viền trái sẽ chạy hết chiều cao mục kể cả phần trên của chấm mốc, nên nó đâm
+ * xuyên qua giữa chấm. Div riêng thì bắt đầu ngay dưới chấm và dừng ở đáy mục.
+ */
+/**
+ * Canh tâm bằng `translate`, không phải bằng số px cứng.
+ *
+ * Chấm mốc rộng 16px (sm) hoặc 24px, nên tâm nằm ở 8px / 12px. Viết
+ * `left-[7px]` thì mép trái đường kẻ ở 7px và tâm nó ở 7.5px — lệch nửa pixel.
+ * Đã đo và thấy đúng: đường kẻ ra x=330 trong khi tâm chấm ở x=331.
+ * `left-2 -translate-x-1/2` đặt tâm đúng 8px bất kể đường kẻ dày bao nhiêu.
+ */
+const lineOffset = computed(() =>
+  size.value === 'sm' ? 'left-2 top-5 -translate-x-1/2' : 'left-3 top-7 -translate-x-1/2',
+)
+const contentGap = computed(() => (size.value === 'sm' ? 'gap-2.5 pb-4' : 'gap-3 pb-6'))
+</script>
+
+<template>
+  <li :class="cn('relative flex', contentGap, props.last && 'pb-0', props.class)">
+    <div
+      v-if="!props.last"
+      :class="cn('absolute bottom-0 w-px bg-border', lineOffset)"
+      aria-hidden="true"
+    />
+
+    <span :class="timelineMarkerVariants({ variant: props.variant, size })">
+      <slot name="marker" />
+    </span>
+
+    <div class="flex min-w-0 flex-1 flex-col gap-1 pt-0.5">
+      <div class="flex flex-wrap items-baseline justify-between gap-x-3">
+        <span v-if="props.title || $slots.title" class="text-sm font-medium">
+          <slot name="title">{{ props.title }}</slot>
+        </span>
+        <!-- `<time>` chứ không phải span: đây là một mốc thời gian thật. -->
+        <time v-if="props.time" class="text-xs text-muted-foreground">{{ props.time }}</time>
+      </div>
+      <div v-if="$slots.default" class="text-sm leading-relaxed text-muted-foreground">
+        <slot />
+      </div>
+    </div>
+  </li>
+</template>

package/src/components/timeline/index.ts

@@ -0,0 +1,15 @@
+import type { ComputedRef } from 'vue'
+import type { TimelineVariants } from '../../variants/components/timeline'
+import { createContext } from 'reka-ui'
+
+export { timelineMarkerVariants, type TimelineMarkerVariants, timelineVariants, type TimelineVariants } from '../../variants/components/timeline'
+export { default as Timeline } from './Timeline.vue'
+
+export interface TimelineContext {
+  size: ComputedRef<TimelineVariants['size']>
+}
+
+export const [injectTimelineContext, provideTimelineContext]
+  = createContext<TimelineContext>('Timeline')
+
+export { default as TimelineItem } from './TimelineItem.vue'

package/src/components/toast/Toaster.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { ToasterProps } from 'vue-sonner'
+import { Toaster } from 'vue-sonner'
+import { useColorMode } from '../../composables/useColorMode'
+import 'vue-sonner/style.css'
+
+// Đặt 1 lần trong AdminLayout. Toàn bộ màu lấy từ design token, không hardcode.
+const props = withDefaults(defineProps<ToasterProps>(), {
+  // Góc dưới phải: toast không đè lên header, và không cắt ngang chỗ mắt
+  // đang đọc khi nội dung bắt đầu từ trên xuống.
+  position: 'bottom-right',
+  // Chỉ là mức nền cho `toast()` trần. Bốn sắc thái có thời lượng riêng, khai
+  // trong `toast.ts` — prop này của sonner chỉ nhận MỘT số cho mọi loại.
+  duration: 4000,
+  // Bắt buộc khi toast lỗi không tự tắt: phải luôn có đường đóng.
+  closeButton: true,
+})
+
+const { isDark } = useColorMode()
+</script>
+
+<template>
+  <!--
+    Mặt nền đi qua BIẾN của vue-sonner, không qua class Tailwind.
+
+    Đo được: `bg-popover`, `border-border`, `rounded-lg` và `shadow-lg` đặt qua
+    `classes` đều KHÔNG có tác dụng nào — stylesheet của sonner nằm ngoài mọi
+    `@layer` nên nó thắng utility bất kể specificity (bẫy số 8 ở đầu file này).
+    Toast vì vậy ra `#000` cứng thay vì `--popover`, và bo góc 8px thay vì 10px
+    của token; nghĩa là toast KHÔNG đi theo bảng màu, dù tài liệu vẫn nói có.
+
+    Biến thì inline style luôn thắng, nên đây là đường duy nhất đi tới nơi.
+  -->
+  <Toaster
+    v-bind="props"
+    :theme="isDark ? 'dark' : 'light'"
+    :style="{
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+      '--border-radius': 'var(--radius-lg)',
+    }"
+    :toast-options="{
+      classes: {
+        // Mặt nền, viền và bo góc KHÔNG ở đây — xem `style` bên trên.
+        // `surface` giữ lại vì nó là móc của theme kính, không phải màu.
+        toast: 'surface group',
+        title: 'text-sm font-medium',
+        description: 'text-sm text-muted-foreground',
+        actionButton: 'bg-primary text-primary-foreground rounded-md text-xs px-2 py-1',
+        cancelButton: 'bg-muted text-muted-foreground rounded-md text-xs px-2 py-1',
+        closeButton: 'bg-background border-border text-muted-foreground',
+        // Dùng -soft-foreground chứ không phải màu gốc: --warning sáng chỉ đạt
+        // 2.28:1 trên nền, kể cả cho icon (ngưỡng đồ hoạ là 3:1).
+        error: 'border-destructive/40 [&_[data-icon]]:text-destructive-soft-foreground',
+        success: 'border-success/40 [&_[data-icon]]:text-success-soft-foreground',
+        warning: 'border-warning/40 [&_[data-icon]]:text-warning-soft-foreground',
+        info: 'border-info/40 [&_[data-icon]]:text-info-soft-foreground',
+      },
+    }"
+  />
+</template>

package/src/components/toast/index.ts

@@ -0,0 +1,4 @@
+// Bọc `toast` để gắn thời lượng mặc định theo sắc thái — xem `toast.ts`.
+export { toast } from './toast'
+export { default as Toaster } from './Toaster.vue'
+export type { ExternalToast, ToastT } from 'vue-sonner'

package/src/components/toast/toast.ts

@@ -0,0 +1,57 @@
+import type { ExternalToast } from 'vue-sonner'
+import { toast as base } from 'vue-sonner'
+
+/** Kiểu tham số đầu của vue-sonner (`titleT`) — thư viện không export nên suy ra. */
+type Message = Parameters<typeof base.success>[0]
+
+/** Bốn sắc thái có thời lượng mặc định riêng. */
+type Severity = 'success' | 'info' | 'warning' | 'error'
+
+/**
+ * Thời lượng theo **mức nghiêm trọng**, không phải một con số chung.
+ *
+ * Toast càng quan trọng càng phải ở lại lâu, và cái quan trọng nhất thì không
+ * được tự đi. Lỗi biến mất sau bốn giây nghĩa là người dùng vừa liếc đi chỗ
+ * khác là mất luôn thông tin duy nhất nói cho họ biết vừa có chuyện gì — mà
+ * không có cách nào lấy lại.
+ *
+ * Đây cũng là yêu cầu của WCAG 2.2.1 (Timing Adjustable): nội dung tự ẩn phải
+ * cho người dùng cách kéo dài, hoặc đừng tự ẩn.
+ */
+const DURATION: Record<Severity, number> = {
+  success: 4000,
+  info: 4000,
+  warning: 7000,
+  // Number.POSITIVE_INFINITY là cách sonner hiểu "chờ người dùng tự tắt".
+  // Toaster đã bật `closeButton` nên luôn có đường đóng.
+  error: Number.POSITIVE_INFINITY,
+}
+
+/**
+ * `...data` đứng SAU nên bên gọi vẫn ghi đè được:
+ * `toast.error('…', { duration: 5000 })` chạy đúng 5 giây.
+ */
+function withDuration(kind: Severity) {
+  return (message: Message, data?: ExternalToast): string | number =>
+    base[kind](message, { duration: DURATION[kind], ...data })
+}
+
+/**
+ * Bọc `toast` của vue-sonner để gắn thời lượng mặc định theo sắc thái.
+ *
+ * Phải bọc chứ không đặt được ở `<Toaster>`: prop `duration` của nó là **một**
+ * con số cho mọi loại, thư viện không có chỗ khai theo từng loại.
+ *
+ * Mọi thứ khác (`toast.promise`, `.loading`, `.dismiss`, gọi trực tiếp…) giữ
+ * nguyên bản.
+ */
+export const toast = Object.assign(
+  (message: Message, data?: ExternalToast) => base(message, data),
+  base,
+  {
+    success: withDuration('success'),
+    info: withDuration('info'),
+    warning: withDuration('warning'),
+    error: withDuration('error'),
+  },
+)

package/src/components/toggle/Toggle.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ToggleEmits, ToggleProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { ToggleVariants } from './index'
+import { Toggle, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { toggleVariants } from './index'
+
+const props = defineProps<ToggleProps & ClassProps & {
+  variant?: ToggleVariants['variant']
+  size?: ToggleVariants['size']
+}>()
+
+const emits = defineEmits<ToggleEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, variant: _variant, size: _size, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <Toggle
+    v-bind="forwarded"
+    :class="cn(toggleVariants({ variant: props.variant, size: props.size }), props.class)"
+  >
+    <slot />
+  </Toggle>
+</template>

package/src/components/toggle/ToggleGroup.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { ToggleGroupRootEmits, ToggleGroupRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { ToggleVariants } from './index'
+import { ToggleGroupRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { buttonGroupVariants } from '../button-group'
+import { provideToggleGroupContext } from './index'
+
+const props = withDefaults(
+  defineProps<ToggleGroupRootProps & ClassProps & {
+    variant?: ToggleVariants['variant']
+    size?: ToggleVariants['size']
+    /**
+     * `true` thì các nút dính liền thành một khối; `false` thì rời nhau.
+     *
+     * Khối dính dùng lại **nguyên** `buttonGroupVariants` — một nhóm toggle dính
+     * liền với một ButtonGroup là cùng một thứ về mặt hình: bỏ bo góc cạnh
+     * trong, gộp viền chung, đẩy nút đang focus lên trên. shadcn viết lại logic
+     * đó lần thứ hai trong ToggleGroup; ở đây gọi lại cái đã có.
+     */
+    attached?: boolean
+  }>(),
+  { type: 'single', variant: 'ghost', size: 'default', attached: true },
+)
+
+const emits = defineEmits<ToggleGroupRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, variant: _variant, size: _size, attached: _attached, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+
+provideToggleGroupContext({
+  variant: computed(() => props.variant),
+  size: computed(() => props.size),
+})
+</script>
+
+<template>
+  <ToggleGroupRoot
+    v-bind="forwarded"
+    :class="cn(
+      props.attached
+        ? buttonGroupVariants({ orientation: props.orientation === 'vertical' ? 'vertical' : 'horizontal' })
+        : 'flex w-fit items-center gap-1',
+      !props.attached && props.orientation === 'vertical' && 'flex-col items-stretch',
+      props.class,
+    )"
+  >
+    <slot />
+  </ToggleGroupRoot>
+</template>

package/src/components/toggle/ToggleGroupItem.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { ToggleGroupItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { ToggleVariants } from './index'
+import { ToggleGroupItem } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { injectToggleGroupContext, toggleVariants } from './index'
+
+const props = defineProps<ToggleGroupItemProps & ClassProps & {
+  variant?: ToggleVariants['variant']
+  size?: ToggleVariants['size']
+}>()
+
+const group = injectToggleGroupContext(null)
+
+const variant = computed(() => props.variant ?? group?.variant.value)
+const size = computed(() => props.size ?? group?.size.value)
+
+const delegated = computed(() => {
+  const { class: _class, variant: _variant, size: _size, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <ToggleGroupItem
+    v-bind="delegated"
+    :class="cn(toggleVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </ToggleGroupItem>
+</template>

package/src/components/toggle/index.ts

@@ -0,0 +1,18 @@
+import type { ComputedRef } from 'vue'
+import type { ToggleVariants } from '../../variants/components/toggle'
+import { createContext } from 'reka-ui'
+
+export { toggleVariants, type ToggleVariants } from '../../variants/components/toggle'
+export { default as Toggle } from './Toggle.vue'
+export { default as ToggleGroup } from './ToggleGroup.vue'
+
+/** Kiểu và cỡ khai một lần ở nhóm, từng nút con đọc lại. */
+export interface ToggleGroupContext {
+  variant: ComputedRef<ToggleVariants['variant']>
+  size: ComputedRef<ToggleVariants['size']>
+}
+
+export const [injectToggleGroupContext, provideToggleGroupContext]
+  = createContext<ToggleGroupContext>('ToggleGroup')
+
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue'

package/src/components/token-table/TokenTable.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { cn } from '../../lib/utils'
+import { DocText } from '../doc-text'
+
+/** Một token màu trong bảng tham chiếu. */
+export interface TokenDoc {
+  /** Tên biến CSS, ví dụ `--primary`. */
+  name: string
+  description?: string
+  /** Cột phải: token này áp cho cái gì. */
+  meta?: string
+}
+
+const props = defineProps<ClassProps & {
+  rows: TokenDoc[]
+  heading?: string
+}>()
+
+const { t } = useI18n()
+
+// Không đặt default trong props: chuỗi đó tính một lần lúc dựng component nên
+// nó đóng băng ở ngôn ngữ lúc ấy. Rơi lui bằng computed thì đổi ngôn ngữ là đổi.
+const heading = computed(() => props.heading ?? t('ui.tokenTable.heading'))
+
+/**
+ * Đường dẫn chấm của một token, suy ra từ chính tên CSS — `--button-radius`
+ * thành `button.radius`. Đó là dạng mà `definePreset` của `@vestow/theme`
+ * nhận, và là cách primevue.dev bày bảng token của họ: hai cột cạnh nhau, một
+ * cột đường dẫn một cột biến CSS.
+ *
+ * SUY RA chứ không khai: không có dữ liệu thứ hai để mà trôi, và thêm một token
+ * vào CSS là dòng mới tự có cả hai dạng.
+ */
+function tokenPath(name: string): string {
+  return name.replace(/^--/, '').replaceAll('-', '.')
+}
+</script>
+
+<template>
+  <div :class="cn('overflow-hidden rounded-xl border border-border', props.class)">
+    <div class="border-b border-border bg-sidebar px-3.5 py-[9px] text-[10.5px] font-medium uppercase tracking-[0.05em] text-muted-foreground">
+      {{ heading }}
+    </div>
+
+    <div
+      v-for="row in props.rows"
+      :key="row.name"
+      class="flex min-w-0 flex-col gap-[7px] border-b border-border px-3.5 py-3 last:border-b-0"
+    >
+      <div class="flex flex-wrap items-center gap-3">
+        <span class="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
+          <span class="font-mono text-[12.5px] font-semibold [overflow-wrap:anywhere]">{{ tokenPath(row.name) }}</span>
+          <code class="rounded-md border border-border px-1.5 py-0.5 font-mono text-[11.5px] text-muted-foreground [overflow-wrap:anywhere]">{{ row.name }}</code>
+        </span>
+      </div>
+
+      <span v-if="row.description" class="text-pretty text-[12.5px] leading-[1.55] text-muted-foreground">
+        <DocText :text="row.description" />
+      </span>
+
+      <span v-if="row.meta" class="font-mono text-[11.5px] text-muted-foreground">{{ row.meta }}</span>
+    </div>
+  </div>
+</template>

package/src/components/token-table/index.ts

@@ -0,0 +1,2 @@
+export type { TokenDoc } from './TokenTable.vue'
+export { default as TokenTable } from './TokenTable.vue'

package/src/components/toolbar/Toolbar.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { ToolbarRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ToolbarRoot } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<ToolbarRootProps & ClassProps & {
+    /** Viền và nền quanh thanh. Tắt khi nó nằm sẵn trong một Card. */
+    bordered?: boolean
+  }>(),
+  { orientation: 'horizontal', bordered: true, loop: true },
+)
+
+const delegated = computed(() => {
+  const { class: _class, bordered: _bordered, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <ToolbarRoot
+    v-bind="delegated"
+    :class="cn(
+      'flex w-full items-center gap-1',
+      props.orientation === 'vertical' && 'w-fit flex-col items-stretch',
+      props.bordered && 'rounded-lg border border-border bg-card p-1',
+      props.class,
+    )"
+  >
+    <slot />
+  </ToolbarRoot>
+</template>

package/src/components/toolbar/ToolbarButton.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { ToolbarButtonProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { ButtonVariants } from '../button'
+import { ToolbarButton } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { buttonVariants } from '../button'
+
+const props = withDefaults(
+  defineProps<ToolbarButtonProps & ClassProps & {
+    variant?: ButtonVariants['variant']
+    size?: ButtonVariants['size']
+  }>(),
+  { variant: 'ghost', size: 'sm' },
+)
+
+const delegated = computed(() => {
+  const { class: _class, variant: _variant, size: _size, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <!-- Dùng lại `buttonVariants`: nút trong thanh công cụ và nút ngoài thanh phải
+       cùng chiều cao, nếu không hàng bị gợn ở chỗ giao nhau. -->
+  <ToolbarButton
+    v-bind="delegated"
+    :class="cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)"
+  >
+    <slot />
+  </ToolbarButton>
+</template>

package/src/components/toolbar/ToolbarSeparator.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ToolbarSeparatorProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ToolbarSeparator } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ToolbarSeparatorProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <ToolbarSeparator
+    v-bind="delegated"
+    :class="cn('mx-1 shrink-0 bg-border data-[orientation=horizontal]:h-5 data-[orientation=horizontal]:w-px data-[orientation=vertical]:my-1 data-[orientation=vertical]:mx-0 data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full', props.class)"
+  />
+</template>

package/src/components/toolbar/index.ts

@@ -0,0 +1,3 @@
+export { default as Toolbar } from './Toolbar.vue'
+export { default as ToolbarButton } from './ToolbarButton.vue'
+export { default as ToolbarSeparator } from './ToolbarSeparator.vue'

package/src/components/tooltip/Tooltip.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui'
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>

package/src/components/tooltip/TooltipContent.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<TooltipContentProps & ClassProps & { showArrow?: boolean }>(),
+  { sideOffset: 6, showArrow: true },
+)
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, showArrow: _showArrow, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      v-bind="forwarded"
+      :class="cn(
+        'z-(--z-overlay) max-w-xs rounded-md bg-foreground px-2.5 py-1.5 text-xs text-background shadow-md',
+        'data-[state=delayed-open]:animate-in data-[state=instant-open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0',
+        'data-[state=delayed-open]:zoom-in-95 data-[state=closed]:zoom-out-95',
+        props.class,
+      )"
+    >
+      <slot />
+      <TooltipArrow v-if="showArrow" class="fill-foreground" :width="8" :height="4" />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

package/src/components/tooltip/TooltipProvider.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from 'reka-ui'
+import { TooltipProvider } from 'reka-ui'
+
+// Đặt 1 lần ở root app. Delay ngắn hợp với admin (thao tác liên tục, hover nhiều).
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 300,
+  skipDelayDuration: 300,
+})
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>

package/src/components/tooltip/TooltipTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from 'reka-ui'
+import { TooltipTrigger } from 'reka-ui'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>

package/src/components/tooltip/index.ts

@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'