@vestow/vue 0.1.0

package/src/components/switch/Switch.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { focusRing } from '../../lib/focus'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<SwitchRootProps & ClassProps>()
+const emits = defineEmits<SwitchRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <SwitchRoot
+    v-bind="forwarded"
+    :class="cn(
+      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors',
+      focusRing,
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      props.class,
+    )"
+  >
+    <SwitchThumb
+      class="pointer-events-none block size-4 rounded-full bg-background shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+    />
+  </SwitchRoot>
+</template>

package/src/components/switch/index.ts

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

package/src/components/table/Table.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+/**
+ * Thuộc tính rơi tự do đi xuống `<table>`, KHÔNG xuống cái div bọc.
+ *
+ * Cái div chỉ là vùng cuộn — nó đã có `containerClass` của riêng nó. Đặt
+ * `role="treegrid"` lên `<Table>` mà nó dính vào div thì bảng vẫn là `table`,
+ * còn cái div thành một treegrid rỗng: hai lời khai sai cùng lúc, không có gì báo.
+ */
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<ClassProps & { containerClass?: string }>()
+</script>
+
+<template>
+  <!-- Bảng luôn cuộn trong container riêng -> body trang không bao giờ cuộn ngang -->
+  <div :class="cn('relative w-full overflow-auto', props.containerClass)">
+    <table v-bind="$attrs" :class="cn('w-full caption-bottom border-separate border-spacing-0 text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>

package/src/components/table/TableBody.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>
+  <tbody :class="cn('[&_tr:last-child_td]:border-b-0', props.class)">
+    <slot />
+  </tbody>
+</template>

package/src/components/table/TableCell.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>
+  <td :class="cn('border-b border-border px-3 py-2 align-middle', props.class)">
+    <slot />
+  </td>
+</template>

package/src/components/table/TableEmpty.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { useI18n } from '../../composables/useI18n'
+import { Inbox } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps & { colspan: number, message?: string }>()
+const { t } = useI18n()
+</script>
+
+<template>
+  <tr>
+    <td :colspan="props.colspan" :class="cn('h-40 text-center', props.class)">
+      <div class="flex flex-col items-center justify-center gap-2 text-muted-foreground">
+        <Inbox class="size-6" />
+        <span class="text-sm">{{ props.message ?? t('ui.table.empty') }}</span>
+      </div>
+    </td>
+  </tr>
+</template>

package/src/components/table/TableHead.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <th
+    :class="cn(
+      'h-10 whitespace-nowrap border-b border-border bg-muted/60 px-3 text-left align-middle text-xs font-medium text-muted-foreground backdrop-blur',
+      props.class,
+    )"
+  >
+    <slot />
+  </th>
+</template>

package/src/components/table/TableHeader.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps & { sticky?: boolean }>()
+</script>
+
+<template>
+  <thead :class="cn(props.sticky && '[&_th]:sticky [&_th]:top-0 [&_th]:z-(--z-raised)', props.class)">
+    <slot />
+  </thead>
+</template>

package/src/components/table/TableRow.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps & { selected?: boolean, clickable?: boolean }>()
+</script>
+
+<template>
+  <tr
+    :data-state="props.selected ? 'selected' : undefined"
+    :class="cn(
+      'transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+      props.clickable && 'cursor-pointer',
+      props.class,
+    )"
+  >
+    <slot />
+  </tr>
+</template>

package/src/components/table/index.ts

@@ -0,0 +1,7 @@
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableEmpty } from './TableEmpty.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableRow } from './TableRow.vue'

package/src/components/tabs/Tabs.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<TabsRootProps & ClassProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded" :class="cn('flex flex-col gap-4', props.class)">
+    <slot />
+  </TabsRoot>
+</template>

package/src/components/tabs/TabsContent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { TabsContentProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { TabsContent } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<TabsContentProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <TabsContent
+    v-bind="delegated"
+    :class="cn('outline-none focus-visible:ring-2 focus-visible:ring-ring', props.class)"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/src/components/tabs/TabsList.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { TabsListProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { TabsList } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<TabsListProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegated"
+    :class="cn(
+      'inline-flex h-9 w-fit items-center justify-center gap-1 rounded-lg bg-muted p-1 text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>

package/src/components/tabs/TabsTrigger.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { TabsTriggerProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { TabsTrigger } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<TabsTriggerProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="delegated"
+    :class="cn(
+      'inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      'disabled:pointer-events-none disabled:opacity-50',
+      'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      '[&_svg]:size-4 [&_svg]:shrink-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsTrigger>
+</template>

package/src/components/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'

package/src/components/textarea/Textarea.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { focusRing, invalidRing } from '../../lib/focus'
+import { cn } from '../../lib/utils'
+
+defineProps<ClassProps & { invalid?: boolean }>()
+
+const model = defineModel<string | null>()
+</script>
+
+<template>
+  <textarea
+    v-model="model"
+    :aria-invalid="invalid || undefined"
+    :data-invalid="invalid || undefined"
+    :class="cn(
+      'flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-xs transition-colors',
+      'placeholder:text-muted-foreground',
+      focusRing,
+      'disabled:cursor-not-allowed disabled:opacity-50',
+      invalidRing,
+      $props.class,
+    )"
+  />
+</template>

package/src/components/textarea/index.ts

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

package/src/components/theme-controls/LocaleMenu.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { useI18n } from '../../composables/useI18n'
+import { Check, Languages } from '../../lib/icons'
+import { Button } from '../button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from '../dropdown-menu'
+
+/**
+ * Nút đổi ngôn ngữ. Dùng ở CẢ HAI header — `KitHeader` của trang giới thiệu và
+ * `AdminLayout` của màn quản trị.
+ *
+ * Trước đó danh sách ngôn ngữ nằm trong `PaletteMenu`, mà `PaletteMenu` chỉ có ở
+ * `KitHeader` — nghĩa là vào `/admin` rồi thì không còn đường đổi ngôn ngữ. Tách
+ * ra thành control riêng vì ngôn ngữ không phải một trục *giao diện*: nó không
+ * đi cùng nhóm với bảng màu, chế độ sáng tối và bề mặt.
+ *
+ * Nút là ICON, không phải mã ngôn ngữ.
+ *
+ * Bản trước hiện "EN" / "VI" với lý do: người đang lạc sang thứ tiếng không đọc
+ * được vẫn nhận ra mã, còn icon thì chỉ nói đây là chỗ đổi ngôn ngữ chứ không
+ * nói đang ở ngôn ngữ nào. Đánh đổi đó vẫn có thật — nhưng thông tin ấy không
+ * mất, nó lùi vào trong menu: mục đang bật có dấu tick, và tên mỗi ngôn ngữ
+ * viết bằng CHÍNH ngôn ngữ đó nên vẫn nhận ra được mà không cần đọc hiểu.
+ *
+ * `Languages` chứ không phải `Globe`: quả địa cầu trong lucide đọc ra là vùng /
+ * trang web, còn cái này là dịch thuật.
+ *
+ * **Nét 2,2 chứ không phải 2 mặc định của Lucide** — chỉnh cho THUẬN MẮT, và là
+ * chỗ duy nhất trong repo đi chệch nét chuẩn.
+ *
+ * `languages` là một glyph THƯA: hai cụm nhỏ nằm chéo nhau, nét ngắn, ở giữa
+ * gần như trống. Đo độ phủ mực trên 24 icon Lucide đang dùng thì nó được 0,219
+ * — thấp hơn trung vị 0,265 khoảng 17%, và thấp nhất trong ba icon của cụm bên
+ * phải `KitHeader`. Cùng khung 16px mà nhìn ra nhạt hơn hẳn.
+ *
+ * Không chữa bằng cách phóng to: thiếu MỰC chứ không thiếu BỀ NGANG — nét chéo
+ * đã trải kín khung, nên 17–18px làm nó to hơn hai icon kia thấy rõ (đã dựng
+ * thử ở mức phóng 4×). Chữa bằng nét thì mực dày lên mà hình không đổi cỡ.
+ *
+ * 2,4 bù đủ mực theo số đo nhưng nhìn ra ĐẬM hơn hai icon kia — dấu hiệu cho
+ * thấy khớp riêng độ phủ là sai, vì phép đo đó phạt oan glyph thưa mà rộng.
+ * 2,2 là chỗ mắt thấy cả ba cùng sức nặng.
+ */
+const props = defineProps<{
+  /** Class cho nút bấm. Hai header có kích thước nút khác nhau. */
+  class?: string
+}>()
+
+const { locale, locales, setLocale, t } = useI18n()
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button
+        variant="ghost"
+        :class="props.class"
+        :aria-label="t('ui.locale.language')"
+      >
+        <!-- Nét 2,2, không phải 2 — lý do ở JSDoc đầu file. -->
+        <Languages :stroke-width="2.2" />
+      </Button>
+    </DropdownMenuTrigger>
+
+    <DropdownMenuContent align="end" class="w-[212px]">
+      <DropdownMenuLabel>{{ t('ui.locale.language') }}</DropdownMenuLabel>
+
+      <DropdownMenuItem
+        v-for="item in locales"
+        :key="item.id"
+        class="gap-2.5"
+        @select="setLocale(item.id)"
+      >
+        <span class="grid size-[26px] flex-none place-items-center rounded-lg border border-border bg-secondary text-[10px] font-semibold uppercase">
+          {{ item.id }}
+        </span>
+
+        <span class="flex min-w-0 flex-1 flex-col">
+          <!-- Tên viết bằng CHÍNH ngôn ngữ đó, không dịch — xem `locales` trong
+               `src/i18n`. Dịch nó ra thì người đang lạc ngôn ngữ không tìm
+               được đường về. -->
+          <span class="text-[12.5px] font-medium">{{ item.name }}</span>
+          <span class="truncate text-[11px] text-muted-foreground">{{ item.tag }}</span>
+        </span>
+
+        <Check v-if="item.id === locale" class="flex-none text-primary" />
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

package/src/components/theme-controls/PaletteMenu.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import type { Component } from 'vue'
+import type { ColorMode } from '../../composables/useColorMode'
+import { computed } from 'vue'
+import { useColorMode } from '../../composables/useColorMode'
+import { useI18n } from '../../composables/useI18n'
+import { usePalette } from '../../composables/usePalette'
+import { Check, Monitor, Moon, Palette, Sun } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import { Button } from '../button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../dropdown-menu'
+
+/*
+ * Ngôn ngữ KHÔNG nằm ở đây — nó có `LocaleMenu` riêng. Ba trục trong menu này
+ * đều là diện mạo và đều ghi lên `<html>` qua `themeController`; ngôn ngữ thì
+ * không cùng nhóm, và menu này lại chỉ có ở `KitHeader`, nên để chung là màn
+ * quản trị không có đường đổi ngôn ngữ.
+ */
+
+/**
+ * Đọc thẳng ba composable, KHÔNG qua pinia store của app.
+ *
+ * Trước đây control này nằm ở `apps/admin` và đi qua `useThemeStore`. Cái store
+ * đó không giữ state — nó chỉ chuyền tiếp đúng ba composable dưới đây — nên bỏ
+ * nó đi không tạo ra nguồn sự thật thứ hai, mà lại gỡ được ràng buộc cuối cùng
+ * giữ control này ngoài `packages/ui`: không router, không store.
+ *
+ * Nhờ vậy cả ba app (kit, blocks, admin) dùng chung một bản.
+ */
+const props = defineProps<{
+  /**
+   * Class cho nút bấm. Cùng khuôn với `LocaleMenu` — hai control này luôn đứng
+   * cạnh nhau nên chúng phải nhận sắc thái từ cùng một chỗ.
+   */
+  class?: string
+}>()
+
+const { t } = useI18n()
+const { mode, setMode } = useColorMode()
+const { palette, palettes, setPalette } = usePalette()
+
+const activePalette = computed(() => palettes.find(item => item.id === palette.value) ?? palettes[0])
+
+/**
+ * Khai ngay tại đây chứ không đưa vào `useColorMode`: composable nằm trong
+ * `packages/ui`, mà chuỗi người dùng nhìn thấy thì thuộc về app.
+ *
+ * Phải là `computed`, không phải hằng ở tầng module: hằng tính đúng một lần lúc
+ * import nên nó đóng băng ở ngôn ngữ lúc ấy — cùng cái bẫy của `withDefaults`.
+ */
+const colorModes = computed<{ id: ColorMode, name: string, description: string, icon: Component }[]>(() => [
+  { id: 'light', name: t('ui.theme.modeLight'), description: t('ui.theme.modeLightHint'), icon: Sun },
+  { id: 'dark', name: t('ui.theme.modeDark'), description: t('ui.theme.modeDarkHint'), icon: Moon },
+  { id: 'system', name: t('ui.theme.modeSystem'), description: t('ui.theme.modeSystemHint'), icon: Monitor },
+])
+
+/**
+ * Mô tả của bảng màu PHỦ lên registry, không sửa registry.
+ *
+ * `@vestow/theme` là dữ liệu thuần dùng chung cho mọi framework — nhét một
+ * danh sách ngôn ngữ vào đó là bắt nó biết tới i18n. Chuỗi tiếng Anh ở registry
+ * vì vậy vẫn còn nguyên và làm bản mặc định cho bên dùng không có i18n; app thì
+ * phủ lên theo `id`.
+ *
+ * Tên bảng màu là danh từ riêng nên giữ nguyên — chỉ mô tả mới dịch.
+ */
+const paletteOptions = computed(() =>
+  palettes.map(item => ({ ...item, description: t(`ui.theme.paletteHint.${item.id}`) })),
+)
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <!--
+        Icon, không phải ô màu của bảng đang chọn.
+
+        Bản trước vẽ một chấm tròn mang đúng màu primary đang bật — nó nói được
+        "đang ở bảng nào" ngay ở trạng thái nghỉ. Đổi sang icon thì mất vế đó,
+        nhưng thông tin lùi vào menu chứ không mất hẳn: mục đang bật có dấu tick,
+        và mỗi bảng màu vẫn hiện dải ô màu của nó.
+
+        Đổi lại, ba nút trong cụm bên phải header giờ cùng một ngôn ngữ hình ảnh
+        (icon đơn sắc) thay vì một chấm màu đứng giữa hai icon.
+
+        Nhãn nói CHUNG về giao diện, không riêng bảng màu: menu này gom cả ba
+        trục — bảng màu, sáng/tối, bề mặt.
+      -->
+      <Button variant="ghost" size="icon" :class="cn('size-[30px] rounded-full', props.class)" :aria-label="t('ui.theme.appearanceSettings')">
+        <Palette />
+      </Button>
+    </DropdownMenuTrigger>
+
+    <DropdownMenuContent align="end" class="w-[262px]">
+      <DropdownMenuLabel>{{ t('ui.theme.palette') }}</DropdownMenuLabel>
+
+      <DropdownMenuItem
+        v-for="item in paletteOptions"
+        :key="item.id"
+        class="gap-2.5"
+        @select="setPalette(item.id)"
+      >
+        <span class="flex flex-none gap-[3px]">
+          <span
+            v-for="(swatch, index) in item.swatches"
+            :key="index"
+            class="size-3.5 rounded-md border border-border"
+            :style="{ background: swatch }"
+          />
+        </span>
+
+        <span class="flex min-w-0 flex-1 flex-col">
+          <span class="text-[12.5px] font-medium">{{ item.name }}</span>
+          <span class="truncate text-[11px] text-muted-foreground">{{ item.description }}</span>
+        </span>
+
+        <Check v-if="item.id === palette" class="flex-none text-primary" />
+      </DropdownMenuItem>
+
+      <DropdownMenuSeparator />
+
+      <DropdownMenuLabel>{{ t('ui.theme.appearance') }}</DropdownMenuLabel>
+
+      <DropdownMenuItem
+        v-for="item in colorModes"
+        :key="item.id"
+        class="gap-2.5"
+        @select="setMode(item.id)"
+      >
+        <span class="grid size-[26px] flex-none place-items-center rounded-lg border border-border bg-secondary">
+          <component :is="item.icon" />
+        </span>
+
+        <span class="flex min-w-0 flex-1 flex-col">
+          <span class="text-[12.5px] font-medium">{{ item.name }}</span>
+          <span class="truncate text-[11px] text-muted-foreground">{{ item.description }}</span>
+        </span>
+
+        <Check v-if="item.id === mode" class="flex-none text-primary" />
+      </DropdownMenuItem>
+
+      <div class="flex items-center justify-between gap-2 px-2 pb-1 pt-0.5 font-mono text-[11px] text-muted-foreground">
+        <span>--primary</span>
+        <span class="text-foreground">{{ activePalette.swatches[0] }}</span>
+      </div>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

package/src/components/theme-controls/ThemeToggle.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useColorMode } from '../../composables/useColorMode'
+import { useI18n } from '../../composables/useI18n'
+import { Moon, Sun } from '../../lib/icons'
+import { Button } from '../button'
+
+const { t } = useI18n()
+const { isDark, toggle } = useColorMode()
+</script>
+
+<template>
+  <Button
+    variant="ghost"
+    size="icon"
+    :aria-label="isDark ? t('ui.theme.toLight') : t('ui.theme.toDark')"
+    @click="toggle()"
+  >
+    <Moon v-if="isDark" />
+    <Sun v-else />
+  </Button>
+</template>

package/src/components/theme-controls/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Ba control cho ba trục giao diện, cộng nút đổi ngôn ngữ.
+ *
+ * Nằm ở `packages/ui` chứ không ở app vì chúng **không đọc router và không đọc
+ * store** — chỉ đi qua `useColorMode` / `usePalette` / `useSurface` / `useI18n`,
+ * mà cả bốn đều ở ngay trong package này. Nhờ vậy kit, blocks và admin dùng
+ * chung đúng một bản thay vì mỗi app một bản trôi dần khỏi nhau.
+ *
+ * Trước đây chúng ở `apps/admin` với lý do "phải đọc pinia store". Lý do đó
+ * không đứng vững: cái store ấy không giữ state, nó chỉ chuyền tiếp đúng ba
+ * composable trên.
+ */
+export { default as LocaleMenu } from './LocaleMenu.vue'
+export { default as PaletteMenu } from './PaletteMenu.vue'
+export { default as ThemeToggle } from './ThemeToggle.vue'

package/src/components/timeline/Timeline.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { TimelineVariants } from './index'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { provideTimelineContext, timelineVariants } from './index'
+
+const props = withDefaults(
+  defineProps<ClassProps & { size?: TimelineVariants['size'] }>(),
+  { size: 'default' },
+)
+
+provideTimelineContext({ size: computed(() => props.size) })
+</script>
+
+<template>
+  <ol :class="cn(timelineVariants({ size: props.size }), props.class)">
+    <slot />
+  </ol>
+</template>