@vestow/vue 0.1.0

package/README.md

@@ -0,0 +1,233 @@
+# `@vestow/vue`
+
+89 component Vue 3, phần lớn dựng trên [Reka UI](https://reka-ui.com), tô bằng Tailwind v4 và
+`@vestow/theme`. Bộ này là phần Vue của WoodBlock.
+
+Nó mang theo hai tầng mà trước đây là package riêng, và mang vì cùng một lý do — chúng
+không dùng được nếu thiếu component đọc chúng:
+
+| trong package | là gì |
+|---|---|
+| `src/variants` | 27 bảng `cva`, `cn()`, vòng focus, class menu, hình học chart |
+| `src/i18n` | locale controller + 126 khoá mà chính component phát ra (`aria-label` của Carousel, nút Đóng của Dialog, lỗi Zod) |
+
+Thứ đứng riêng là `@vestow/theme`: Design Token dạng CSS thuần cộng registry chín trục.
+App nào chỉ cần token — kể cả app không dùng Vue — nạp mình nó là đủ.
+
+Package **export thẳng `.vue` source**, không qua build — app mới là bên biên dịch. Đó là
+chủ ý: Tailwind phải quét được class thật, và app tự quyết mức tree-shake. Kéo theo vài
+ràng buộc ở phần cài đặt bên dưới, đọc kỹ ba mục có dấu ⚠.
+
+## Cài
+
+```bash
+pnpm add @vestow/vue @vestow/theme
+pnpm add -D typescript tailwindcss @tailwindcss/vite @vitejs/plugin-vue
+```
+
+### ⚠ `typescript` là bắt buộc, kể cả app JavaScript thuần
+
+`@vue/compiler-sfc` cần TypeScript để phân giải type trong `defineProps<T>`, mà component
+ở đây khai props bằng type import từ `reka-ui`. Thiếu nó thì build đổ hàng loạt với đúng
+một câu, lặp lại cho từng file:
+
+```
+[@vue/compiler-sfc] Failed to load TypeScript, which is required for
+resolving imported types.
+```
+
+Đã đo: 297 lỗi, tất cả cùng gốc này.
+
+### ⚠ Và `typescript` phải là **6.x**, không phải 7
+
+Cái bẫy tệ hơn, vì `pnpm add -D typescript` hôm nay kéo về **7.x** và mọi thứ trông như đã
+đúng cho tới lúc build:
+
+```
+[@vue/compiler-sfc] No fs option provided to `compileScript` in non-Node environment.
+File system access is required for resolving imported types.
+```
+
+Đo trên một app trống cài từ tarball: `typescript@7.0.2` → **298 lỗi**; hạ xuống
+`typescript@6.0.3` → build xanh, không sửa gì khác.
+
+```bash
+pnpm add -D "typescript@~6.0.2"
+```
+
+**Nguyên nhân, đo chứ không đoán.** `typescript@7` là bản viết lại bằng Go, và entry mặc
+định của nó chỉ còn hai trường:
+
+```js
+require('typescript')  // -> { version: '7.0.2', versionMajorMinor: '7.0' }
+```
+
+Toàn bộ compiler API dời sang `typescript/unstable/*` với **hình dạng khác hẳn** — một lớp
+`API`/`Project`/`Program` thay cho namespace `ts.*` phẳng. Còn `@vue/compiler-sfc` gọi
+thẳng API cũ: `ts.sys` để đọc file, rồi `ts.findConfigFile` / `ts.resolveModuleName` để
+tìm ra `reka-ui` khi bạn viết `defineProps<AccordionTriggerProps>`. Với TS 7 thì `ts.sys`
+là `undefined`, và câu "non-Node environment" ở trên là compiler-sfc suy ra nhầm rằng nó
+đang chạy trong trình duyệt.
+
+**Cấp `fs` thủ công KHÔNG cứu được** — đã thử, vì nó chỉ chữa được nửa đầu:
+
+| | lỗi |
+|---|---|
+| TS 7 | 298 |
+| TS 7 + `vue({ script: { fs } })` | **168** — `ts2.findConfigFile is not a function` |
+| TS 6 | 0 |
+
+`fs` lo được import **tương đối** (`../../lib/types`); import **bare** (`reka-ui`) thì
+bắt buộc đi qua bộ phân giải module của TypeScript, và bộ đó không tồn tại ở TS 7.
+
+Nên đây không phải lựa chọn của package này: chừng nào `@vue/compiler-sfc` chưa port sang
+API mới thì **mọi** thư viện Vue ship `.vue` source đều đứng ở TS 6.
+
+### Vẫn dùng được TS 7 — cài song song, cách chính thức của Microsoft
+
+Ràng buộc thật không phải "cấm TS 7", mà là **`require('typescript')` phải trả về API 6.x**.
+TypeScript 7.0 (08/07/2026) phát hành có chủ ý mà **không có API** — bản thay thế hẹn ở
+7.1 — và ghi thẳng trong thông báo phát hành: *"Projects using Vue, MDX, Astro, Svelte, and
+others will need to continue using TypeScript 6.0 for now."* Kèm theo là gói tương thích
+`@typescript/typescript6`.
+
+Đo trên app thử ở trên, và nó chạy:
+
+```bash
+pnpm add -D "typescript@npm:@typescript/typescript6@6.0.2" "typescript7@npm:typescript@7.0.2"
+```
+
+| | kết quả |
+|---|---|
+| `vite build` (compiler-sfc thấy API 6.x) | **xanh**, CSS đủ class |
+| `vue-tsc --noEmit` | chạy |
+| `tsc --version` | **7.0.2** — binary đến từ gói TS 7 |
+| `tsc --noEmit` trên file `.ts` thuần | bắt lỗi bằng TS 7 |
+
+Tức phần TypeScript thuần của bạn chạy TS 7, chỉ riêng đường biên dịch SFC là đọc API 6.x.
+(Microsoft bày chiều ngược lại — `typescript` là 7 còn gói tương thích cấp `tsc6` — nhưng
+với một dự án Vue thì phải để tên `typescript` cho bản 6, vì compiler-sfc không cho đổi chỗ
+nó tìm.)
+
+**Mốc cần theo dõi: TypeScript 7.1**, kế hoạch phát hành stable **24/11/2026**, trong đó có
+mục "Stabilize API". Port `compiler-sfc` sang API đó là việc của Vue và chưa có mốc; issue
+TS-native ở `vuejs/language-tools` đã đóng với nhãn `upstream: typescript`. Theo dõi phía
+Vue và phía TS, đừng theo dõi phía đây.
+
+Cả hai ràng buộc TypeScript ở mục này là cái giá trực tiếp của việc export `.vue` source.
+Một package build sẵn ra `.js` + `.d.ts` thì không dính cái nào — đó cũng là đường thoát
+nếu ngày nào TS 6 hết đường lùi.
+
+### ⚠ pnpm 11 phải cho `vue-demi` chạy build script
+
+`reka-ui` (qua `@floating-ui/vue`) và `@tanstack/vue-form` đều dùng nó, và postinstall của
+nó là thứ chọn shim đúng cho Vue 3. Trong `pnpm-workspace.yaml`:
+
+```yaml
+allowBuilds:
+  vue-demi: true
+  esbuild: true
+  # maplibre-gl đi kèm @unovis/ts cho phần bản đồ. Không dùng bản đồ thì để chặn.
+  maplibre-gl: false
+```
+
+## Nạp CSS
+
+Đúng hai dòng, và thứ tự có ý nghĩa:
+
+```css
+@import "@vestow/vue/styles.css";
+@source "./";
+```
+
+### ⚠ Đừng khai `@source` trỏ vào `node_modules`
+
+`@vestow/vue/styles.css` đã tự khai `@source "../"` cho chính nó, mà Tailwind phân giải
+`@source` **tương đối theo file CSS chứa nó** — nên nằm trong `node_modules` nó vẫn trỏ
+đúng vào source của mình. Bạn chỉ cần khai vùng của **app bạn**.
+
+Nó cũng đã `@import "tailwindcss" source(none)` và nạp sẵn token. Viết thêm
+`@import "tailwindcss"` ở file của bạn là nạp hai lần — đo được, dư 19 KB CSS thô.
+
+Nghiệm thu không phải bằng mắt: build xong grep file CSS tìm `ui-button` và `--focus-ring`.
+Có thì `@source` đúng; DOM render đủ mà sạch class là dấu hiệu vùng quét bị hụt.
+
+## Dùng
+
+```ts
+// main.ts
+import { createApp } from 'vue'
+import { themeController } from '@vestow/theme'
+import App from './App.vue'
+import './style.css'
+
+themeController.init()
+createApp(App).mount('#app')
+```
+
+```vue
+<script setup lang="ts">
+import { Badge, Button, Card, CardContent } from '@vestow/vue'
+</script>
+
+<template>
+  <Card>
+    <CardContent>
+      <Button variant="destructive" tone="soft">Xoá</Button>
+      <Badge>Mới</Badge>
+    </CardContent>
+  </Card>
+</template>
+```
+
+`themeController.init()` là thứ đọc `localStorage` và áp ba trục giao diện lên `<html>`.
+Không gọi thì component vẫn chạy, chỉ luôn ở bảng màu mặc định và không nhớ lựa chọn.
+
+## Hai trục của Button và Badge
+
+| prop | giá trị | nghĩa |
+|---|---|---|
+| `variant` | default, secondary, destructive, success, warning, info, outline, ghost, link | **màu** |
+| `tone` | solid (mặc định), soft | **kiểu tô** |
+
+Kính không phải một `tone`. Bật `data-surface="glass"` trên `<html>` (hoặc
+`themeController.setSurface('glass')`) là **mọi** nút tự thành kính, không nút nào phải
+khai gì.
+
+## Import lẻ
+
+`exports` mở sẵn ba nhánh con, dùng khi không muốn kéo cả `index.ts`:
+
+```ts
+import Button from '@vestow/vue/components/button/Button.vue'
+import { cn } from '@vestow/vue/lib/utils'
+import { useI18n } from '@vestow/vue/composables/useI18n'
+
+// Hai tầng không-Vue, dùng được mà không kéo component nào:
+import { buttonVariants } from '@vestow/vue/variants/components/button'
+import { i18nController, locales } from '@vestow/vue/i18n'
+```
+
+## Peer
+
+`vue` là peer dependency (`^3.5.42`). `@vestow/theme` là dependency thật — cài
+`@vestow/vue` là có luôn.
+
+## Publish
+
+Không có bước build: `files` đóng gói `index.ts` + `src/`, và `exports` trỏ thẳng vào
+source ở cả chế độ phát triển lẫn sau khi publish. Đóng gói thử mà không cần registry:
+
+```bash
+pnpm -F @vestow/vue pack --pack-destination /tmp
+```
+
+Muốn thử cài tarball ở một project khác thì `@vestow/theme` cũng phải có mặt — nó là
+dependency thật, nên pnpm sẽ đi tìm trên registry. Trỏ nó về tarball local bằng
+`overrides` trong `pnpm-workspace.yaml` của project đó, hoặc dựng một registry local
+(`npx verdaccio`) rồi publish cả hai vào đó.
+
+```yaml
+overrides:
+  '@vestow/theme': file:/đường/dẫn/woodblock-theme-0.1.0.tgz
+```

package/index.ts

@@ -0,0 +1,8 @@
+export * from './src/components'
+export * from './src/composables'
+export * from './src/lib/date'
+export * from './src/lib/menu'
+export * from './src/lib/platform'
+export * from './src/lib/types'
+export * from './src/lib/utils'
+export * from './src/lib/zod-messages'

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@vestow/vue",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Bộ component Vue 3 của WoodBlock: 89 component trên nền Reka UI, kèm 27 bảng cva và bộ chuỗi i18n của chính thư viện. Token và theme ở @vestow/theme.",
+  "license": "MIT",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": "./index.ts",
+    "./styles.css": "./src/styles/index.css",
+    "./icons": "./src/lib/icons.ts",
+    "./i18n": "./src/i18n/index.ts",
+    "./variants": "./src/variants/index.ts",
+    "./variants/*": "./src/variants/*.ts",
+    "./lib/*": "./src/lib/*",
+    "./components/*": "./src/components/*",
+    "./composables/*": "./src/composables/*"
+  },
+  "files": [
+    "README.md",
+    "index.ts",
+    "src"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.42"
+  },
+  "dependencies": {
+    "@internationalized/date": "^3.12.3",
+    "@tanstack/vue-form": "^1.33.5",
+    "@tanstack/vue-table": "^9.2.4",
+    "@tanstack/vue-virtual": "^3.13.36",
+    "@unovis/ts": "^1.6.7",
+    "@unovis/vue": "^1.6.7",
+    "@vestow/theme": "0.1.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-vue": "^8.6.0",
+    "lucide-vue-next": "^1.0.0",
+    "reka-ui": "^2.10.4",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.3",
+    "tw-animate-css": "^1.4.0",
+    "vue-sonner": "^2.0.9",
+    "zod": "^4.5.4"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "@vitejs/plugin-vue": "^6.0.8",
+    "@vue/test-utils": "^2.5.0",
+    "happy-dom": "^20.14.3",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.2",
+    "vitest": "^5.0.0",
+    "vue": "^3.5.42",
+    "vue-tsc": "^3.3.11"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json"
+  }
+}

package/src/components/accordion/Accordion.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { AccordionRootEmits, AccordionRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { AccordionVariants } from './index'
+import { AccordionRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { accordionVariants, provideAccordionContext } from './index'
+
+const props = withDefaults(
+  defineProps<AccordionRootProps & ClassProps & {
+    variant?: AccordionVariants['variant']
+  }>(),
+  {
+    type: 'single',
+    variant: 'plain',
+    /**
+     * Reka mặc định `false` cho `collapsible` — mở một mục rồi thì không đóng
+     * lại được, luôn phải có đúng một mục mở. Đó là khuôn của tab, không phải
+     * của accordion: người đọc mong bấm lại vào tiêu đề thì nó gập.
+     */
+    collapsible: true,
+  },
+)
+
+const emits = defineEmits<AccordionRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, variant: _variant, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+
+provideAccordionContext({ variant: computed(() => props.variant) })
+</script>
+
+<template>
+  <AccordionRoot
+    v-bind="forwarded"
+    :class="cn(accordionVariants({ variant: props.variant }), props.class)"
+  >
+    <slot />
+  </AccordionRoot>
+</template>

package/src/components/accordion/AccordionContent.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { AccordionContentProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { AccordionContent } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { accordionContentVariants, injectAccordionContext } from './index'
+
+const props = defineProps<AccordionContentProps & ClassProps>()
+
+const accordion = injectAccordionContext(null)
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <AccordionContent
+    v-bind="delegated"
+    :class="cn(accordionContentVariants({ variant: accordion?.variant.value }))"
+  >
+    <!-- Padding đặt ở lớp TRONG, không phải trên chính AccordionContent: phần
+         tử đó đang bị animate `height`, thêm padding vào nó thì lúc đóng chiều
+         cao chạy về 0 mà padding vẫn còn, khối giật một nhịp ở cuối. -->
+    <div :class="cn('pb-3.5 leading-relaxed', accordion?.variant.value === 'contained' && 'px-4', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

package/src/components/accordion/AccordionItem.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { AccordionItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { AccordionItem } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { accordionItemVariants, injectAccordionContext } from './index'
+
+const props = defineProps<AccordionItemProps & ClassProps>()
+
+const accordion = injectAccordionContext(null)
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <AccordionItem
+    v-bind="delegated"
+    :class="cn(accordionItemVariants({ variant: accordion?.variant.value }), props.class)"
+  >
+    <slot />
+  </AccordionItem>
+</template>

package/src/components/accordion/AccordionTrigger.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { AccordionTriggerProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { AccordionHeader, AccordionTrigger } from 'reka-ui'
+import { computed } from 'vue'
+import { ChevronDown } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { accordionTriggerVariants, injectAccordionContext } from './index'
+
+const props = defineProps<AccordionTriggerProps & ClassProps>()
+
+const accordion = injectAccordionContext(null)
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <!-- `AccordionHeader` render thẻ h3 mang role="heading": trình đọc màn hình
+       liệt kê được các mục như một dàn ý, không chỉ là một dãy nút. -->
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      v-bind="delegated"
+      :class="cn(accordionTriggerVariants({ variant: accordion?.variant.value }), props.class)"
+    >
+      <slot />
+
+      <!-- Mũi tên nằm ngoài slot nên nội dung tiêu đề dài bao nhiêu cũng không
+           đẩy nó đi; `mt-0.5` cho nó thẳng hàng với DÒNG ĐẦU của tiêu đề, vì
+           tiêu đề có thể xuống hai dòng còn mũi tên thì không. -->
+      <ChevronDown
+        class="mt-0.5 size-4 shrink-0 text-muted-foreground transition-transform duration-(--duration-base) group-data-[state=open]/accordion-trigger:rotate-180 motion-reduce:transition-none"
+        aria-hidden="true"
+      />
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

package/src/components/accordion/index.ts

@@ -0,0 +1,18 @@
+import type { ComputedRef } from 'vue'
+import type { AccordionVariants } from '../../variants/components/accordion'
+import { createContext } from 'reka-ui'
+
+export { accordionContentVariants, accordionItemVariants, accordionTriggerVariants, accordionVariants, type AccordionVariants } from '../../variants/components/accordion'
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+
+/** Kiểu trình bày khai một lần ở gốc, mọi phần con đọc lại từ đây. */
+export interface AccordionContext {
+  variant: ComputedRef<AccordionVariants['variant']>
+}
+
+export const [injectAccordionContext, provideAccordionContext]
+  = createContext<AccordionContext>('Accordion')
+
+export { default as AccordionTrigger } from './AccordionTrigger.vue'

package/src/components/alert/Alert.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { AlertVariants } from './index'
+import { cn } from '../../lib/utils'
+import { alertVariants } from './index'
+
+const props = defineProps<ClassProps & { variant?: AlertVariants['variant'] }>()
+</script>
+
+<template>
+  <div role="alert" :class="cn(alertVariants({ variant }), props.class)">
+    <slot name="icon" />
+    <div class="col-start-2 flex flex-col gap-1">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/components/alert/AlertDescription.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <div :class="cn('text-sm text-muted-foreground [&_p]:leading-relaxed', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/alert/AlertTitle.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <div :class="cn('font-medium leading-none tracking-tight', props.class)">
+    <slot />
+  </div>
+</template>

package/src/components/alert/index.ts

@@ -0,0 +1,5 @@
+export { alertVariants, type AlertVariants } from '../../variants/components/alert'
+export { default as Alert } from './Alert.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
+
+export { default as AlertTitle } from './AlertTitle.vue'

package/src/components/avatar/Avatar.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { AvatarRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { AvatarRoot } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<AvatarRootProps & ClassProps & { size?: 'sm' | 'default' | 'lg' }>(),
+  { size: 'default' },
+)
+
+const delegated = computed(() => {
+  const { class: _class, size: _size, ...rest } = props
+  return rest
+})
+
+const sizeClass = computed(() => ({
+  sm: 'size-7 text-xs',
+  default: 'size-9 text-sm',
+  lg: 'size-12 text-base',
+}[props.size]))
+</script>
+
+<template>
+  <AvatarRoot
+    v-bind="delegated"
+    :class="cn('relative flex shrink-0 overflow-hidden rounded-full', sizeClass, props.class)"
+  >
+    <slot />
+  </AvatarRoot>
+</template>

package/src/components/avatar/AvatarFallback.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { AvatarFallback } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<AvatarFallbackProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <AvatarFallback
+    v-bind="delegated"
+    :class="cn('flex size-full items-center justify-center rounded-full bg-muted font-medium text-muted-foreground', props.class)"
+  >
+    <slot />
+  </AvatarFallback>
+</template>

package/src/components/avatar/AvatarImage.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { AvatarImage } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<AvatarImageProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <AvatarImage v-bind="delegated" :class="cn('size-full object-cover', props.class)" />
+</template>

package/src/components/avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as AvatarImage } from './AvatarImage.vue'

package/src/components/badge/Badge.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { BadgeVariants } from './index'
+import { Primitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+import { badgeVariants } from './index'
+
+const props = withDefaults(
+  defineProps<PrimitiveProps & ClassProps & {
+    variant?: BadgeVariants['variant']
+    /** Cỡ: `xs` cho nhãn phụ 9px, `default` là cỡ thường. */
+    size?: BadgeVariants['size']
+    /** Kiểu tô: `solid` đặc, `soft` nền pha loãng. */
+    tone?: BadgeVariants['tone']
+  }>(),
+  { as: 'span' },
+)
+</script>
+
+<template>
+  <Primitive :as="as" :as-child="asChild" :class="cn(badgeVariants({ variant, size, tone }), props.class)">
+    <slot />
+  </Primitive>
+</template>

package/src/components/badge/index.ts

@@ -0,0 +1,3 @@
+export { badgeVariants, type BadgeVariants } from '../../variants/components/badge'
+
+export { default as Badge } from './Badge.vue'

package/src/components/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <nav aria-label="breadcrumb">
+    <ol :class="cn('flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground', props.class)">
+      <slot />
+    </ol>
+  </nav>
+</template>

package/src/components/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <li :class="cn('inline-flex items-center gap-1.5', props.class)">
+    <slot />
+  </li>
+</template>