@vestow/vue 0.1.0

package/src/components/sidebar/SidebarMenuButton.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { SidebarMenuButtonVariants } from './index'
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import Tooltip from '../tooltip/Tooltip.vue'
+import TooltipContent from '../tooltip/TooltipContent.vue'
+import TooltipTrigger from '../tooltip/TooltipTrigger.vue'
+import { useSidebar } from './context'
+import { sidebarMenuButtonVariants } from './index'
+
+/**
+ * Gốc của component là một provider KHÔNG vẽ ra DOM, nên thuộc tính rơi tự do
+ * không có chỗ đáp và biến mất hẳn. Đo được: đặt `id` lên component thì nó
+ * không xuất hiện ở bất kỳ đâu trong DOM, và `<Label for>` trỏ vào hư không.
+ *
+ * Chuyển tay xuống CẢ HAI nhánh: nhánh không có tooltip vốn đang nhận attrs
+ * nhờ fallthrough, bật `inheritAttrs: false` mà quên nó là lấy mất.
+ */
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<PrimitiveProps & ClassProps & {
+    isActive?: boolean
+    variant?: SidebarMenuButtonVariants['variant']
+    size?: SidebarMenuButtonVariants['size']
+    /** Nhãn hiện khi sidebar đã thu về cỡ icon. Bỏ trống thì không có tooltip. */
+    tooltip?: string
+    /**
+     * Hiện tooltip cả khi cột đang mở.
+     *
+     * Dành cho cột `collapsible="none"` rộng đúng cỡ icon — nó không bao giờ ở
+     * trạng thái `collapsed` nên luật mặc định sẽ giấu tooltip vĩnh viễn, trong
+     * khi nhãn thì vẫn bị cắt mất.
+     */
+    alwaysShowTooltip?: boolean
+  }>(),
+  { as: 'button', isActive: false, variant: 'default', size: 'default', alwaysShowTooltip: false },
+)
+
+const { isMobile, state } = useSidebar()
+
+const nativeType = computed(() => (props.as === 'button' ? 'button' : undefined))
+const buttonClass = computed(() => cn(sidebarMenuButtonVariants({ variant: props.variant, size: props.size }), props.class))
+</script>
+
+<template>
+  <!--
+    Tooltip chỉ có nghĩa khi nhãn đã bị thu mất. Ở trạng thái mở, hoặc trên
+    mobile (sidebar là ngăn kéo, luôn hiện đủ chữ), nó lặp lại đúng thứ đang
+    đọc được — và trình đọc màn hình sẽ đọc hai lần.
+  -->
+  <Tooltip v-if="tooltip">
+    <TooltipTrigger as-child>
+      <Primitive
+        v-bind="$attrs"
+        :as="as"
+        :as-child="asChild"
+        :type="nativeType"
+        data-slot="sidebar-menu-button"
+        data-sidebar="menu-button"
+        :data-size="size"
+        :data-active="isActive"
+        :class="buttonClass"
+      >
+        <slot />
+      </Primitive>
+    </TooltipTrigger>
+    <TooltipContent
+      v-if="alwaysShowTooltip || (state === 'collapsed' && !isMobile)"
+      side="right"
+      align="center"
+    >
+      {{ tooltip }}
+    </TooltipContent>
+  </Tooltip>
+
+  <Primitive
+    v-else
+    v-bind="$attrs"
+    :as="as"
+    :as-child="asChild"
+    :type="nativeType"
+    data-slot="sidebar-menu-button"
+    data-sidebar="menu-button"
+    :data-size="size"
+    :data-active="isActive"
+    :class="buttonClass"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/sidebar/SidebarMenuItem.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <li
+    data-slot="sidebar-menu-item"
+    data-sidebar="menu-item"
+    :class="cn(
+      'group/menu-item relative',
+      props.class,
+    )"
+  >
+    <slot />
+  </li>
+</template>

package/src/components/sidebar/SidebarMenuSkeleton.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type { ClassProps } from '../../lib/types'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import Skeleton from '../skeleton/Skeleton.vue'
+
+const props = withDefaults(
+  defineProps<ClassProps & { showIcon?: boolean }>(),
+  { showIcon: false },
+)
+
+/**
+ * Bề rộng ngẫu nhiên 50–90%.
+ *
+ * Tính một lần ở setup chứ không trong render: đọc `Math.random()` mỗi lần vẽ
+ * thì mỗi lần cha cập nhật là cả danh sách nhấp nháy đổi độ dài.
+ */
+const width = `${Math.floor(Math.random() * 40) + 50}%`
+const textStyle = computed<CSSProperties>(() => ({ '--skeleton-width': width } as CSSProperties))
+</script>
+
+<template>
+  <div
+    data-slot="sidebar-menu-skeleton"
+    data-sidebar="menu-skeleton"
+    :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)"
+  >
+    <Skeleton v-if="props.showIcon" data-sidebar="menu-skeleton-icon" class="size-4 rounded-md" />
+    <Skeleton
+      data-sidebar="menu-skeleton-text"
+      class="h-4 max-w-(--skeleton-width) flex-1"
+      :style="textStyle"
+    />
+  </div>
+</template>

package/src/components/sidebar/SidebarMenuSub.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <ul
+    data-slot="sidebar-menu-sub"
+    data-sidebar="menu-sub"
+    :class="cn(
+      [
+        'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
+        'group-data-[collapsible=icon]:hidden',
+      ],
+      props.class,
+    )"
+  >
+    <slot />
+  </ul>
+</template>

package/src/components/sidebar/SidebarMenuSubButton.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { Primitive } from 'reka-ui'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<PrimitiveProps & ClassProps & {
+    isActive?: boolean
+    size?: 'sm' | 'md'
+  }>(),
+  { as: 'a', isActive: false, size: 'md' },
+)
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    data-slot="sidebar-menu-sub-button"
+    data-sidebar="menu-sub-button"
+    :data-size="size"
+    :data-active="isActive"
+    :class="cn(
+      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring',
+      'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2',
+      'active:bg-sidebar-accent active:text-sidebar-accent-foreground',
+      'disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50',
+      '[&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
+      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+      props.size === 'sm' && 'text-xs',
+      props.size === 'md' && 'text-sm',
+      'group-data-[collapsible=icon]:hidden',
+      props.class,
+    )"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/sidebar/SidebarMenuSubItem.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <li
+    data-slot="sidebar-menu-sub-item"
+    data-sidebar="menu-sub-item"
+    :class="cn(
+      'group/menu-sub-item relative',
+      props.class,
+    )"
+  >
+    <slot />
+  </li>
+</template>

package/src/components/sidebar/SidebarProvider.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import type { CSSProperties } from 'vue'
+import type { ClassProps } from '../../lib/types'
+import { computed, onBeforeUnmount, onMounted, provide, ref } from 'vue'
+import { useIsMobile } from '../../composables/useIsMobile'
+import { cn } from '../../lib/utils'
+import TooltipProvider from '../tooltip/TooltipProvider.vue'
+import {
+  SIDEBAR_INJECTION_KEY,
+  SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+} from './context'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    /** Trạng thái ban đầu khi không điều khiển từ ngoài. */
+    defaultOpen?: boolean
+    /**
+     * Điều khiển từ ngoài. Bỏ trống thì component tự giữ trạng thái.
+     *
+     * `open: undefined` trong `withDefaults` là BẮT BUỘC, không phải thừa: prop
+     * kiểu Boolean mà không khai default thì Vue ép giá trị vắng mặt thành
+     * `false` chứ không để `undefined`. Thiếu dòng đó, mọi `<SidebarProvider>`
+     * không truyền `open` đều bị coi là "đang được điều khiển và đang đóng" —
+     * sidebar dựng ra rồi nằm ngoài màn hình, không lỗi, không cảnh báo.
+     */
+    open?: boolean
+    style?: CSSProperties
+  }>(),
+  { defaultOpen: true, open: undefined },
+)
+
+const emit = defineEmits<{ 'update:open': [value: boolean] }>()
+
+const isMobile = useIsMobile()
+const openMobile = ref(false)
+
+/*
+ * KHÔNG lưu trạng thái vào cookie như shadcn.
+ *
+ * Bên đó cookie tồn tại để `page.tsx` đọc được ở phía server và tránh nháy một
+ * nhịp lúc hydrate — một nhu cầu của Next.js mà repo này không có. Giữ lại thì
+ * nó thành một chỗ ghi mà không ai đọc, và tệ hơn: gallery block chạy 16 iframe
+ * cùng origin, một cookie dùng chung nghĩa là gập sidebar ở ô này thì 15 ô kia
+ * gập theo.
+ */
+const internalOpen = ref(props.defaultOpen)
+const isControlled = computed(() => props.open !== undefined)
+const open = computed(() => (isControlled.value ? props.open! : internalOpen.value))
+
+function setOpen(value: boolean): void {
+  if (!isControlled.value)
+    internalOpen.value = value
+
+  emit('update:open', value)
+}
+
+function setOpenMobile(value: boolean): void {
+  openMobile.value = value
+}
+
+function toggleSidebar(): void {
+  if (isMobile.value)
+    openMobile.value = !openMobile.value
+  else
+    setOpen(!open.value)
+}
+
+const state = computed(() => (open.value ? 'expanded' as const : 'collapsed' as const))
+
+function onKeydown(event: KeyboardEvent): void {
+  if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+    event.preventDefault()
+    toggleSidebar()
+  }
+}
+
+onMounted(() => window.addEventListener('keydown', onKeydown))
+onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))
+
+provide(SIDEBAR_INJECTION_KEY, {
+  state,
+  open,
+  setOpen,
+  openMobile,
+  setOpenMobile,
+  isMobile,
+  toggleSidebar,
+})
+
+const wrapperStyle = computed<CSSProperties>(() => ({
+  '--sidebar-width': SIDEBAR_WIDTH,
+  '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+  ...props.style,
+} as CSSProperties))
+</script>
+
+<template>
+  <!-- `delayDuration: 0` — tooltip ở đây thay cho nhãn đã bị thu gọn mất, chờ
+       một nhịp là người dùng không biết mình đang trỏ vào mục nào. -->
+  <TooltipProvider :delay-duration="0">
+    <div
+      data-slot="sidebar-wrapper"
+      :style="wrapperStyle"
+      :class="cn(
+        'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
+        props.class,
+      )"
+    >
+      <slot />
+    </div>
+  </TooltipProvider>
+</template>

package/src/components/sidebar/SidebarRail.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { useI18n } from '../../composables/useI18n'
+import { cn } from '../../lib/utils'
+import { useSidebar } from './context'
+
+const props = defineProps<ClassProps>()
+
+const { t } = useI18n()
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <!-- Dải 16px sát mép sidebar: kéo/bấm để gập. `tabindex="-1"` vì đã có
+       `SidebarTrigger` nhận focus — hai chỗ làm cùng một việc thì bàn phím phải
+       Tab hai lần qua cùng một hành động. -->
+  <button
+    type="button"
+    data-sidebar="rail"
+    data-slot="sidebar-rail"
+    :aria-label="t('ui.sidebar.toggle')"
+    :title="t('ui.sidebar.toggle')"
+    tabindex="-1"
+    :class="cn(
+      'absolute inset-y-0 z-(--z-elevated) hidden w-4 -translate-x-1/2 transition-all ease-linear sm:flex',
+      'after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border',
+      'group-data-[side=left]:-right-4 group-data-[side=right]:left-0',
+      'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+      '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+      'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',
+      '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+      '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+      props.class,
+    )"
+    @click="toggleSidebar"
+  />
+</template>

package/src/components/sidebar/SidebarSeparator.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+import Separator from '../separator/Separator.vue'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <Separator
+    data-slot="sidebar-separator"
+    data-sidebar="separator"
+    :class="cn('mx-2 w-auto bg-sidebar-border', props.class)"
+  />
+</template>

package/src/components/sidebar/SidebarTrigger.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { useI18n } from '../../composables/useI18n'
+import { PanelLeft } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import Button from '../button/Button.vue'
+import { useSidebar } from './context'
+
+const props = defineProps<ClassProps>()
+
+const { t } = useI18n()
+const { toggleSidebar } = useSidebar()
+</script>
+
+<template>
+  <Button
+    data-sidebar="trigger"
+    data-slot="sidebar-trigger"
+    variant="ghost"
+    size="icon"
+    :class="cn('size-7', props.class)"
+    @click="toggleSidebar"
+  >
+    <PanelLeft />
+    <span class="sr-only">{{ t('ui.sidebar.toggle') }}</span>
+  </Button>
+</template>

package/src/components/sidebar/context.ts

@@ -0,0 +1,39 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
+import { inject } from 'vue'
+
+/** Bề rộng ba trạng thái. Khai ở đây để `Sidebar` và `SidebarProvider` cùng đọc. */
+export const SIDEBAR_WIDTH = '16rem'
+export const SIDEBAR_WIDTH_MOBILE = '18rem'
+export const SIDEBAR_WIDTH_ICON = '3rem'
+
+/** Phím tắt bật/tắt, đi kèm Cmd (macOS) hoặc Ctrl. */
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
+
+export interface SidebarContext {
+  /** `expanded` hay `collapsed` — cũng là `data-state` để CSS bắt. */
+  state: ComputedRef<'expanded' | 'collapsed'>
+  open: ComputedRef<boolean>
+  setOpen: (value: boolean) => void
+  openMobile: Ref<boolean>
+  setOpenMobile: (value: boolean) => void
+  isMobile: Readonly<Ref<boolean>>
+  toggleSidebar: () => void
+}
+
+export const SIDEBAR_INJECTION_KEY: InjectionKey<SidebarContext> = Symbol('woodblock-sidebar')
+
+/**
+ * Đọc trạng thái sidebar từ `SidebarProvider` gần nhất.
+ *
+ * Ném lỗi thay vì trả `undefined`: mọi phần con của sidebar đều cần trạng thái
+ * này, thiếu provider thì chúng render ra một cái vỏ trông vẫn hợp lý nhưng
+ * không bấm được — đúng kiểu lỗi im lặng khó truy.
+ */
+export function useSidebar(): SidebarContext {
+  const context = inject(SIDEBAR_INJECTION_KEY, null)
+
+  if (!context)
+    throw new Error('useSidebar phải nằm trong một <SidebarProvider>.')
+
+  return context
+}

package/src/components/sidebar/index.ts

@@ -0,0 +1,34 @@
+export { sidebarMenuButtonVariants, type SidebarMenuButtonVariants } from '../../variants/components/sidebar'
+
+export {
+  SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_ICON,
+  SIDEBAR_WIDTH_MOBILE,
+  useSidebar,
+} from './context'
+
+export type { SidebarContext } from './context'
+export { default as Sidebar } from './Sidebar.vue'
+export { default as SidebarContent } from './SidebarContent.vue'
+export { default as SidebarFooter } from './SidebarFooter.vue'
+export { default as SidebarGroup } from './SidebarGroup.vue'
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue'
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue'
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'
+export { default as SidebarHeader } from './SidebarHeader.vue'
+export { default as SidebarInput } from './SidebarInput.vue'
+export { default as SidebarInset } from './SidebarInset.vue'
+export { default as SidebarMenu } from './SidebarMenu.vue'
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue'
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue'
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue'
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue'
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'
+export { default as SidebarProvider } from './SidebarProvider.vue'
+export { default as SidebarRail } from './SidebarRail.vue'
+export { default as SidebarSeparator } from './SidebarSeparator.vue'
+
+export { default as SidebarTrigger } from './SidebarTrigger.vue'

package/src/components/skeleton/Skeleton.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <div aria-hidden="true" :class="cn('animate-pulse rounded-md bg-muted', props.class)" />
+</template>

package/src/components/skeleton/index.ts

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

package/src/components/skip-link/SkipLink.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { useI18n } from '../../composables/useI18n'
+import { focusRing } from '../../lib/focus'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    /** Id của vùng nội dung chính, kèm dấu `#`. */
+    href?: string
+  }>(),
+  { href: '#main' },
+)
+const { t } = useI18n()
+</script>
+
+<template>
+  <!--
+    Hai yêu cầu của một skip link, và cả hai đều dễ làm hỏng:
+
+    1. **Vô hình cho tới khi được focus** — nhưng phải ẩn bằng `transform`, KHÔNG
+       phải `display:none` hay `hidden`. Hai cái đó loại phần tử khỏi chuỗi Tab
+       luôn, tức là cái link không bao giờ tới lượt để mà hiện ra.
+       `sr-only` cũng không dùng được: nó vẫn focus được nhưng lúc focus vẫn vô
+       hình, người dùng bàn phím sẽ thấy focus "biến mất" một nhịp.
+
+    2. **Là phần tử focus được ĐẦU TIÊN của trang** — đặt nó ở đâu khác thì đã
+       phải Tab qua đúng cái đống mà nó sinh ra để bỏ qua.
+
+    Đích đến phải có `tabindex="-1"`, nếu không nhảy neo chỉ cuộn màn hình chứ
+    không dời focus bàn phím — người dùng bấm xong vẫn đứng nguyên chỗ cũ.
+  -->
+  <a
+    :href="props.href"
+    :class="cn(
+      'absolute left-4 top-3 z-(--z-skip-link) -translate-y-[200%] rounded-md border border-border',
+      'bg-background px-3 py-1.5 text-sm font-medium shadow-md transition-transform',
+      'focus:translate-y-0',
+      focusRing,
+      props.class,
+    )"
+  >
+    <slot>{{ t('ui.skipLink') }}</slot>
+  </a>
+</template>

package/src/components/skip-link/index.ts

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

package/src/components/slider/Slider.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import type { SliderVariants } from './index'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { sliderThumbVariants, sliderTrackVariants } from './index'
+
+const props = withDefaults(
+  defineProps<SliderRootProps & ClassProps & {
+    size?: SliderVariants['size']
+  }>(),
+  { size: 'md' },
+)
+
+const emits = defineEmits<SliderRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, size: _size, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+
+/**
+ * Số núm suy ra từ giá trị, không phải một prop riêng.
+ *
+ * Khai `:model-value="[20, 60]"` là ra thanh chọn khoảng, `[20]` là thanh một
+ * núm — không phải nhớ bật thêm cờ `range` như PrimeVue. Đọc cả `defaultValue`
+ * để bản không kiểm soát cũng đúng ngay từ lần render đầu.
+ */
+const thumbCount = computed(() => (props.modelValue ?? props.defaultValue ?? [0]).length)
+</script>
+
+<template>
+  <SliderRoot
+    v-bind="forwarded"
+    :class="cn(
+      'relative flex touch-none select-none items-center',
+      'data-[orientation=horizontal]:w-full',
+      'data-[orientation=vertical]:h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+      'data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <SliderTrack :class="sliderTrackVariants({ size: props.size })">
+      <SliderRange class="ui-slider-range absolute bg-slider-range data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
+    </SliderTrack>
+
+    <SliderThumb
+      v-for="index in thumbCount"
+      :key="index"
+      :class="sliderThumbVariants({ size: props.size })"
+    />
+  </SliderRoot>
+</template>

package/src/components/slider/index.ts

@@ -0,0 +1,3 @@
+export { sliderThumbVariants, sliderTrackVariants, type SliderVariants } from '../../variants/components/slider'
+
+export { default as Slider } from './Slider.vue'