@vestow/vue 0.1.0

package/src/components/input-group/InputGroupAddon.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { InputGroupAddonVariants } from './index'
+import { cn } from '../../lib/utils'
+import { injectInputGroupContext, inputGroupAddonVariants } from './index'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    variant?: InputGroupAddonVariants['variant']
+    /** Đứng trước hay sau ô nhập — quyết định đường kẻ vẽ ở cạnh nào. */
+    align?: InputGroupAddonVariants['align']
+  }>(),
+  { variant: 'text', align: 'start' },
+)
+
+const group = injectInputGroupContext(null)
+</script>
+
+<template>
+  <div
+    :class="cn(
+      inputGroupAddonVariants({
+        variant: props.variant,
+        align: props.align,
+        size: group?.size.value,
+      }),
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/input-group/InputGroupInput.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { injectInputGroupContext } from './index'
+
+const props = defineProps<ClassProps & { disabled?: boolean }>()
+
+const model = defineModel<string | number | null>()
+
+const group = injectInputGroupContext(null)
+
+const padding = computed(() => (group?.size.value === 'sm' ? 'px-2.5' : 'px-3'))
+</script>
+
+<template>
+  <!--
+    Lột sạch viền, nền, bóng và vòng focus: nhóm bên ngoài đang giữ cả bốn thứ
+    đó. Giữ lại trên ô nhập là ra vòng focus lồng trong vòng focus.
+  -->
+  <input
+    v-model="model"
+    :disabled="props.disabled"
+    :class="cn(
+      'min-w-0 flex-1 border-0 bg-transparent text-inherit shadow-none outline-none',
+      'placeholder:text-muted-foreground',
+      'focus:outline-none focus-visible:outline-none focus-visible:ring-0',
+      'disabled:cursor-not-allowed',
+      padding,
+      props.class,
+    )"
+  >
+</template>

package/src/components/input-group/index.ts

@@ -0,0 +1,17 @@
+import type { ComputedRef } from 'vue'
+import type { InputGroupVariants } from '../../variants/components/input-group'
+import { createContext } from 'reka-ui'
+
+export { inputGroupAddonVariants, type InputGroupAddonVariants, inputGroupVariants, type InputGroupVariants } from '../../variants/components/input-group'
+export { default as InputGroup } from './InputGroup.vue'
+export { default as InputGroupAddon } from './InputGroupAddon.vue'
+
+/** Cỡ khai một lần ở nhóm, ô nhập và phần phụ đọc lại. */
+export interface InputGroupContext {
+  size: ComputedRef<InputGroupVariants['size']>
+}
+
+export const [injectInputGroupContext, provideInputGroupContext]
+  = createContext<InputGroupContext>('InputGroup')
+
+export { default as InputGroupInput } from './InputGroupInput.vue'

package/src/components/input-number/InputNumber.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { focusRingWithin, invalidRingWithin } from '../../lib/focus'
+import { Minus, Plus } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<NumberFieldRootProps & ClassProps & {
+    size?: 'sm' | 'default'
+    invalid?: boolean
+    /** Ẩn hai nút cộng trừ, chỉ còn ô nhập có định dạng số. */
+    hideStepper?: boolean
+  }>(),
+  {
+    size: 'default',
+    invalid: false,
+    hideStepper: false,
+    /**
+     * Mặc định `vi-VN`: dấu phân cách nghìn và dấu thập phân của tiếng Việt
+     * ngược với tiếng Anh (1.234,5 chứ không phải 1,234.5). Để trình duyệt tự
+     * đoán theo ngôn ngữ hệ thống thì cùng một màn hình có thể hiện hai kiểu.
+     */
+    locale: 'vi-VN',
+  },
+)
+
+const emits = defineEmits<NumberFieldRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, size: _size, invalid: _invalid, hideStepper: _hideStepper, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+
+const height = computed(() => (props.size === 'sm' ? 'h-(--ui-field-height-sm)' : 'h-(--ui-field-height-md)'))
+
+const stepper = cn(
+  'grid w-8 shrink-0 place-items-center text-muted-foreground transition-colors',
+  'hover:bg-accent hover:text-accent-foreground',
+  'disabled:pointer-events-none disabled:opacity-40',
+  '[&_svg]:size-3.5',
+)
+</script>
+
+<template>
+  <NumberFieldRoot
+    v-bind="forwarded"
+    :data-invalid="props.invalid || undefined"
+    :class="cn(
+      'flex w-full items-stretch overflow-hidden rounded-md border border-input bg-background shadow-xs transition-colors',
+      focusRingWithin,
+      'has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50',
+      invalidRingWithin,
+      height,
+      props.class,
+    )"
+  >
+    <!-- Nút giảm nằm bên TRÁI, tăng bên PHẢI: cùng thứ tự với trục số, nên
+         không phải nghĩ xem nút nào làm gì. -->
+    <NumberFieldDecrement :class="cn(stepper, 'border-r border-input', props.hideStepper && 'hidden')">
+      <Minus />
+    </NumberFieldDecrement>
+
+    <!-- Căn giữa khi có hai nút hai bên, căn trái khi không: số lơ lửng giữa một
+         ô trống trông như bị đặt nhầm chỗ. -->
+    <NumberFieldInput
+      :class="cn(
+        'min-w-0 flex-1 border-0 bg-transparent px-2.5 text-sm tabular-nums outline-none',
+        'placeholder:text-muted-foreground disabled:cursor-not-allowed',
+        props.hideStepper ? 'text-left' : 'text-center',
+      )"
+    />
+
+    <NumberFieldIncrement :class="cn(stepper, 'border-l border-input', props.hideStepper && 'hidden')">
+      <Plus />
+    </NumberFieldIncrement>
+  </NumberFieldRoot>
+</template>

package/src/components/input-number/index.ts

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

package/src/components/input-otp/InputOtp.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import type { PinInputRootEmits, PinInputRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { PinInputInput, PinInputRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed, nextTick } from 'vue'
+import { focusRing, invalidRingStatic } from '../../lib/focus'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<Omit<PinInputRootProps, 'modelValue'> & ClassProps & {
+    /** Số ô. */
+    length?: number
+    /** Chèn dấu ngăn sau mỗi `groupSize` ô. Đặt 0 để không ngăn. */
+    groupSize?: number
+    invalid?: boolean
+  }>(),
+  {
+    length: 6,
+    groupSize: 0,
+    /**
+     * `otp` bật gợi ý mã một lần của trình duyệt: iOS và Chrome sẽ mời dán mã
+     * vừa nhận qua SMS. Đây là lý do chính để dùng component này thay vì sáu ô
+     * `<input>` viết tay.
+     */
+    otp: true,
+    type: 'text',
+    invalid: false,
+  },
+)
+
+const emits = defineEmits<PinInputRootEmits>()
+
+const model = defineModel<string[]>({ default: () => [] })
+
+const delegated = computed(() => {
+  const { class: _class, length: _length, groupSize: _groupSize, invalid: _invalid, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+
+const cells = computed(() => Array.from({ length: props.length }, (_, i) => i))
+
+/** Sau ô thứ `groupSize`, `2*groupSize`… thì chèn dấu ngăn — trừ ô cuối cùng. */
+function hasSeparatorAfter(index: number): boolean {
+  if (!props.groupSize)
+    return false
+  return (index + 1) % props.groupSize === 0 && index !== props.length - 1
+}
+
+/* ------------------------------------------------------------------------- *
+ * Dãy phải LUÔN DÀY: không có ô trống nằm giữa hai ô có giá trị.
+ *
+ * reka đá con trỏ về ô trống đầu tiên ở MỌI lần focus (`handleFocus` của
+ * `PinInputInput`), kể cả khi ô được bấm vào đang có chữ số. Để nguyên hành vi
+ * xoá của reka — xoá tại chỗ, chừa lại một lỗ — thì các ô sau lỗ đó không còn
+ * cách nào chạm tới: chuột, mũi tên và Tab đều bị đá ngược. Xem BUG-001.
+ *
+ * Không tắt được cái đá đó (`otp` gánh luôn `autocomplete="one-time-code"`),
+ * nên thay vào đó ta không bao giờ tạo ra lỗ: xoá thì dồn trái, gõ chèn thì dồn
+ * phải — coi sáu ô như một chuỗi ký tự, đúng cách `input-otp` của shadcn làm.
+ * ------------------------------------------------------------------------- */
+
+/** Dãy hiện tại, đủ `length` phần tử, ô thiếu thành chuỗi rỗng. */
+function currentValues(): string[] {
+  return Array.from({ length: props.length }, (_, i) => model.value[i] ?? '')
+}
+
+/** Ghi lại model, cắt đuôi rỗng cho khớp cách reka tự chuẩn hoá. */
+function commit(values: string[]): void {
+  const next = values.slice(0, props.length)
+  while (next.length > 0 && next[next.length - 1] === '')
+    next.pop()
+  model.value = next
+}
+
+function cellIndexOf(target: EventTarget | null): number {
+  const raw = (target as HTMLElement | null)?.dataset?.index
+  return raw === undefined ? -1 : Number(raw)
+}
+
+function focusCell(root: HTMLElement, index: number): void {
+  nextTick(() => {
+    root.querySelector<HTMLInputElement>(`input[data-index="${index}"]`)?.focus()
+  })
+}
+
+/**
+ * Backspace / Delete: bỏ hẳn ô đó khỏi dãy rồi dồn phần đuôi lên một bước.
+ * Chặn ở pha capture nên handler của reka trên chính ô đó không chạy nữa.
+ */
+function handleKeydownCapture(event: KeyboardEvent): void {
+  if (event.key !== 'Backspace' && event.key !== 'Delete')
+    return
+
+  const root = event.currentTarget as HTMLElement
+  const index = cellIndexOf(event.target)
+  if (index < 0)
+    return
+
+  const values = currentValues()
+  let focusIndex = index
+
+  if (values[index] !== '') {
+    values.splice(index, 1)
+  }
+  else if (event.key === 'Backspace' && index > 0) {
+    // Dãy luôn dày nên ô trống chỉ nằm ở đuôi: lùi lại một ô và xoá ô đó.
+    values.splice(index - 1, 1)
+    focusIndex = index - 1
+  }
+  else {
+    // Delete trên ô trống, hoặc Backspace ở ô đầu: không có gì để xoá.
+    return
+  }
+
+  event.preventDefault()
+  event.stopPropagation()
+  commit(values)
+
+  if (focusIndex !== index)
+    focusCell(root, focusIndex)
+}
+
+/**
+ * Gõ vào ô đang có chữ số khi dãy CHƯA đầy: chèn vào giữa và dồn phần đuôi
+ * sang phải, thay vì đè mất chữ số đang đứng ở đó.
+ *
+ * Dãy đã đầy thì để nguyên hành vi của reka (gõ đè lên đúng ô đó) — không còn
+ * chỗ mà dồn, và đè lên một ô là cách sửa một chữ số sai nhanh nhất.
+ */
+function handleBeforeInputCapture(event: InputEvent): void {
+  if (event.inputType !== 'insertText')
+    return
+
+  const char = event.data
+  if (!char || char.length !== 1)
+    return
+
+  const root = event.currentTarget as HTMLElement
+  const index = cellIndexOf(event.target)
+  if (index < 0)
+    return
+
+  const values = currentValues()
+  // Ô trống thì không có gì phải dồn; dãy đầy thì không còn chỗ để dồn.
+  if (values[index] === '' || values.every(value => value !== ''))
+    return
+
+  event.preventDefault()
+  event.stopPropagation()
+  values.splice(index, 0, char)
+  commit(values)
+  focusCell(root, Math.min(index + 1, props.length - 1))
+}
+</script>
+
+<template>
+  <PinInputRoot
+    v-model="model"
+    v-bind="forwarded"
+    :class="cn('flex items-center gap-2', props.class)"
+    @keydown.capture="handleKeydownCapture"
+    @beforeinput.capture="handleBeforeInputCapture"
+  >
+    <template v-for="index in cells" :key="index">
+      <PinInputInput
+        :index="index"
+        :data-index="index"
+        :class="cn(
+          'size-10 rounded-md border border-input bg-background text-center text-base font-medium shadow-xs transition-colors',
+          // z-(--z-raised) để quầng focus nổi lên trên ô kế bên, không bị nó cắt mất.
+          'focus-visible:z-(--z-raised)',
+          focusRing,
+          'disabled:cursor-not-allowed disabled:opacity-50',
+          props.invalid && invalidRingStatic,
+        )"
+      />
+      <span
+        v-if="hasSeparatorAfter(index)"
+        class="text-muted-foreground"
+        aria-hidden="true"
+      >–</span>
+    </template>
+  </PinInputRoot>
+</template>

package/src/components/input-otp/index.ts

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

package/src/components/input-password/InputPassword.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { computed, ref } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { Eye, EyeOff } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import Button from '../button/Button.vue'
+import Input from '../input/Input.vue'
+import { scoreOf, STRENGTH_LEVELS } from './index'
+
+/**
+ * Gốc là một `<div>`, nên thuộc tính rơi tự do phải chuyển tay xuống `Input` —
+ * cùng lý do đã ghi ở `Input.vue`: `id` dính lên div thì `<label for>` mất đích.
+ */
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    /** Nút con mắt. Tắt đi khi ô nằm trong một luồng không cho phép lộ giá trị. */
+    toggle?: boolean
+    /** Thanh đo độ mạnh. Chỉ bật cho ô ĐẶT mật khẩu, không bật cho ô đăng nhập. */
+    strength?: boolean
+    invalid?: boolean
+    size?: 'sm' | 'default'
+    /**
+     * Nhãn trợ năng cho nút con mắt ở hai trạng thái. Bỏ trống thì lấy chuỗi
+     * của thư viện — đừng đặt default ở đây, chuỗi trong `withDefaults` tính
+     * một lần lúc dựng component nên nó đóng băng ở một ngôn ngữ.
+     */
+    showLabel?: string
+    hideLabel?: string
+  }>(),
+  { toggle: true, strength: false, size: 'default' },
+)
+
+const model = defineModel<string>({ default: '' })
+
+const { t } = useI18n()
+
+const revealed = ref(false)
+
+const toggleLabel = computed(() =>
+  revealed.value
+    ? props.hideLabel ?? t('ui.inputPassword.hide')
+    : props.showLabel ?? t('ui.inputPassword.show'),
+)
+
+const score = computed(() => (props.strength ? scoreOf(model.value) : 0))
+const level = computed(() => STRENGTH_LEVELS[score.value])
+
+/** Chừa chỗ cho nút, nếu không ký tự cuối chui xuống dưới nó. */
+const inputClass = computed(() =>
+  props.toggle ? (props.size === 'sm' ? 'pr-8' : 'pr-9') : undefined,
+)
+</script>
+
+<template>
+  <div :class="cn('w-full', props.class)">
+    <div class="relative">
+      <Input
+        v-bind="$attrs"
+        v-model="model"
+        :type="revealed ? 'text' : 'password'"
+        :size="props.size"
+        :invalid="props.invalid"
+        :class="inputClass"
+      />
+
+      <!--
+        `type="button"` là bắt buộc, không phải cho gọn.
+
+        Nút trần trong một `<form>` mặc định là `submit`, nên bấm vào con mắt
+        để đọc lại thứ mình vừa gõ sẽ GỬI luôn cái form. Không lỗi, không cảnh
+        báo — chỉ là biểu mẫu tự nộp.
+      -->
+      <Button
+        v-if="props.toggle"
+        type="button"
+        variant="ghost"
+        :size="props.size === 'sm' ? 'icon-xs' : 'icon-sm'"
+        :aria-label="toggleLabel"
+        :class="cn(
+          'absolute top-1/2 -translate-y-1/2 text-muted-foreground',
+          props.size === 'sm' ? 'right-1' : 'right-1',
+        )"
+        @click="revealed = !revealed"
+      >
+        <EyeOff v-if="revealed" aria-hidden="true" />
+        <Eye v-else aria-hidden="true" />
+      </Button>
+    </div>
+
+    <!--
+      Thanh đo nằm trong vùng live, nhưng đọc ra là CHỮ chứ không phải con số.
+      Bốn ô màu thì trình đọc màn hình không thấy gì; và vì nhãn chỉ đổi khi
+      qua một nấc nên nó không lải nhải theo từng phím gõ.
+    -->
+    <div v-if="props.strength" class="mt-2">
+      <div class="flex gap-1" aria-hidden="true">
+        <span
+          v-for="step in STRENGTH_LEVELS.length - 1"
+          :key="step"
+          :class="cn(
+            'h-1 flex-1 rounded-full transition-colors',
+            step <= score ? level.bar : 'bg-muted',
+          )"
+        />
+      </div>
+      <p role="status" aria-live="polite" class="mt-1.5 text-xs text-muted-foreground">
+        <template v-if="score > 0">
+          {{ t('ui.inputPassword.strength') }}: <span :class="level.text">{{ t(level.key) }}</span>
+        </template>
+      </p>
+    </div>
+  </div>
+</template>

package/src/components/input-password/index.ts

@@ -0,0 +1,5 @@
+// Thang đo lên `src/variants` vì `STRENGTH_LEVELS` là một bảng class, và
+// bản React đọc cùng bảng đó. Re-export để chỗ gọi không phải sửa import.
+export { scoreOf, STRENGTH_LEVELS, type StrengthLevel } from '../../variants/components/input-password'
+
+export { default as InputPassword } from './InputPassword.vue'

package/src/components/input-tags/InputTags.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { TagsInputRootEmits, TagsInputRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { TagsInputRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { focusRingWithin, invalidRingWithin } from '../../lib/focus'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<TagsInputRootProps & ClassProps>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <!--
+    Vỏ bọc bắt focus bằng `focus-within`, đúng khuôn của InputGroup và
+    InputNumber: ô nhập thật nằm bên trong nên chính nó bị lột sạch viền và vòng
+    focus, còn cái vỏ mới vẽ ra chúng. Để cả hai thì ra vòng focus lồng vòng focus.
+  -->
+  <TagsInputRoot
+    v-bind="forwarded"
+    :class="cn(
+      'flex w-full flex-wrap items-center gap-1.5 rounded-md border border-input bg-background px-2 py-1.5 shadow-xs transition-colors',
+      focusRingWithin,
+      invalidRingWithin,
+      'has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <slot />
+  </TagsInputRoot>
+</template>

package/src/components/input-tags/InputTagsClear.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { TagsInputClearProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { TagsInputClear } from 'reka-ui'
+import { computed } from 'vue'
+import { useI18n } from '../../composables/useI18n'
+import { X } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<TagsInputClearProps & ClassProps & {
+  /** Nhãn trợ năng. Bỏ trống thì lấy chuỗi mặc định của thư viện. */
+  label?: string
+}>()
+
+const { t } = useI18n()
+
+const label = computed(() => props.label ?? t('ui.inputTags.clear'))
+
+const delegated = computed(() => {
+  const { class: _class, label: _label, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <TagsInputClear
+    v-bind="delegated"
+    :aria-label="label"
+    :class="cn(
+      'grid size-5 shrink-0 place-items-center rounded-sm text-muted-foreground transition-colors',
+      'hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      props.class,
+    )"
+  >
+    <slot>
+      <X class="size-3.5" />
+    </slot>
+  </TagsInputClear>
+</template>

package/src/components/input-tags/InputTagsInput.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { TagsInputInputProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { TagsInputInput } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<TagsInputInputProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <!-- Ô nhập bị lột sạch viền và vòng focus: cái vỏ đã vẽ chúng rồi.
+       `min-w-24` để nó không co về 0 khi hàng chip đã đầy. -->
+  <TagsInputInput
+    v-bind="delegated"
+    :class="cn(
+      'h-6 min-w-24 flex-1 border-0 bg-transparent text-sm outline-none placeholder:text-muted-foreground',
+      'disabled:cursor-not-allowed',
+      props.class,
+    )"
+  />
+</template>

package/src/components/input-tags/InputTagsItem.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { TagsInputItemProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { TagsInputItem } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { badgeVariants } from '../badge'
+import { chipVariants } from '../chip'
+
+const props = defineProps<TagsInputItemProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <!--
+    Dáng lấy thẳng từ `Chip` — cùng hai bộ variant, không chép lại chuỗi class.
+    Không bọc chính `Chip` vào đây vì nút gỡ của nó và `TagsInputItemDelete` của
+    reka sẽ tranh nhau làm một việc, mà bản của reka mới là bản biết cách xoá
+    khỏi model và trả focus về ô nhập.
+
+    `data-state=active` là dòng mà bàn phím đang chọn (mũi tên trái/phải) —
+    trạng thái reka có còn Chip thì không.
+  -->
+  <TagsInputItem
+    v-bind="delegated"
+    :class="cn(
+      badgeVariants({ variant: 'secondary' }),
+      chipVariants({ size: 'sm', removable: true }),
+      'data-[state=active]:ring-2 data-[state=active]:ring-ring',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <slot />
+  </TagsInputItem>
+</template>

package/src/components/input-tags/InputTagsItemDelete.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { TagsInputItemDeleteProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { TagsInputItemDelete } from 'reka-ui'
+import { computed } from 'vue'
+import { X } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<TagsInputItemDeleteProps & ClassProps>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <!-- `currentColor` để nút hợp với mọi variant của chip, kể cả nền đặc lẫn
+       nền soft — cùng cách `Chip` xử lý. -->
+  <TagsInputItemDelete
+    v-bind="delegated"
+    :class="cn(
+      'grid size-4 shrink-0 place-items-center rounded-full text-current opacity-60 transition-opacity',
+      'hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current',
+      props.class,
+    )"
+  >
+    <slot>
+      <X class="size-3" />
+    </slot>
+  </TagsInputItemDelete>
+</template>