@vestow/vue 0.1.0

package/src/components/form/FormMessage.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { AlertCircle } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps & { id?: string, message?: string }>()
+</script>
+
+<template>
+  <!--
+    Icon là bắt buộc, không phải trang trí: viền đỏ cộng chữ đỏ đều là tín hiệu
+    MÀU, mà WCAG 1.4.1 cấm mã hoá ý nghĩa chỉ bằng màu. Người bị mù màu đỏ-lục
+    thấy dòng này cùng tông với chữ thường, nên phải có một dấu hiệu không phụ
+    thuộc màu đứng cạnh.
+
+    `aria-hidden` vì chữ ngay bên cạnh đã nói đủ — trình đọc màn hình đọc thêm
+    "hình ảnh cảnh báo" chỉ làm dài thêm câu.
+
+    `mt-px` chứ không phải `items-center`: dòng lỗi có thể dài hai dòng, lúc đó
+    căn giữa sẽ đẩy icon xuống giữa khối chữ. Neo theo dòng đầu mới đúng.
+  -->
+  <p
+    v-if="props.message"
+    :id="props.id"
+    role="alert"
+    :class="cn('flex items-start gap-1.5 text-xs font-medium text-destructive', props.class)"
+  >
+    <AlertCircle class="mt-px size-3.5 shrink-0" aria-hidden="true" />
+    <span>{{ props.message }}</span>
+  </p>
+</template>

package/src/components/form/context.ts

@@ -0,0 +1,54 @@
+import type { AnyFormApi } from '@tanstack/vue-form'
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
+import { inject, provide } from 'vue'
+
+/**
+ * Những gì `Form` chuyền xuống cho `FormField`.
+ *
+ * TanStack Form **không có context sẵn**: `useField` bắt buộc nhận `form` qua
+ * tham số, nên khuôn dùng chính thống của nó là `<form.Field>` viết ngay trong
+ * template của màn đang dùng. Ở đây tự provide/inject để giữ nguyên API cũ —
+ * `<FormField name="email">` là một component rời, không cần biết instance form
+ * nằm ở đâu. Nhờ vậy đổi thư viện form không phải sửa dòng nào trong
+ * `apps/admin`.
+ */
+export interface FormContext {
+  /** Kiểu `AnyFormApi` vì `FormField` không cần biết kiểu giá trị của form bao ngoài. */
+  api: AnyFormApi
+  /**
+   * Lỗi do server trả về, giữ **ngoài** errorMap của TanStack. Xem chú thích
+   * `setErrors` trong `Form.vue` để biết vì sao không dùng khoá `onServer`.
+   */
+  serverErrors: Ref<Record<string, string>>
+  /**
+   * Form đã bấm gửi ít nhất một lần chưa. `FormField` cần biết để hiện lỗi cho
+   * field người dùng **chưa hề chạm tới** — bỏ trống rồi bấm gửi thì vẫn phải
+   * báo.
+   *
+   * Phải chuyền xuống dưới dạng đã bọc sẵn, không để `FormField` tự đọc
+   * `form.state.submissionAttempts`: `AnyFormApi` là kiểu của core, `.state`
+   * của nó là getter trần trên store chứ **không** reactive trong Vue. Đọc
+   * thẳng thì computed không track, và bấm gửi sẽ không hiện lỗi nào — đã dính
+   * đúng lỗi đó một lần. Chỗ duy nhất lấy được bản reactive là `useSelector`
+   * của adapter Vue, mà chỉ `Form.vue` mới có.
+   *
+   * (`useField` thì khác: api nó trả về CÓ state reactive, nên `FormField` đọc
+   * `api.state.meta` trực tiếp được.)
+   */
+  submitted: ComputedRef<boolean>
+}
+
+const formContextKey = Symbol('woodblock-form') as InjectionKey<FormContext>
+
+export function provideFormContext(context: FormContext): void {
+  provide(formContextKey, context)
+}
+
+export function useFormContext(): FormContext {
+  const context = inject(formContextKey, null)
+
+  if (!context)
+    throw new Error('FormField phải nằm bên trong <Form>.')
+
+  return context
+}

package/src/components/form/errors.ts

@@ -0,0 +1,6 @@
+/**
+ * Lên `src/variants/lib/form-errors` — `form-core` là chung cho cả hai
+ * adapter, nên bản React gặp đúng hình dạng errorMap này. Hai bản là hai cơ hội
+ * để một bên quên nhánh MẢNG, mà nhánh đó hỏng âm thầm.
+ */
+export { type FieldErrorMap, firstErrorMessage } from '../../variants/lib/form-errors'

package/src/components/form/index.ts

@@ -0,0 +1,7 @@
+export { default as Form } from './Form.vue'
+export { default as FormDescription } from './FormDescription.vue'
+export { default as FormField } from './FormField.vue'
+export { default as FormItem } from './FormItem.vue'
+export { default as FormLabel } from './FormLabel.vue'
+export { default as FormMessage } from './FormMessage.vue'
+export type { FieldSlotProps, FormExpose } from './types'

package/src/components/form/types.ts

@@ -0,0 +1,55 @@
+import type { Ref } from 'vue'
+
+/**
+ * Props mà FormField truyền xuống control bên trong.
+ * Mục tiêu: `v-bind="field"` là đủ để một control (Input, Select, Switch...)
+ * nối dây vào form, không cần biết gì thêm.
+ *
+ * `T` mặc định là string vì phần lớn field là text input.
+ * Với kiểu khác, khai báo `:default-value` để TS suy ra:
+ *
+ *   <FormField name="age" :default-value="0" />        -> T = number
+ *   <FormField name="active" :default-value="false" /> -> T = boolean
+ */
+export interface FieldBindings<T = string> {
+  'modelValue': T
+  /**
+   * Nhận `unknown` chứ không phải `T`: tham số của hàm là contravariant,
+   * một handler chỉ nhận `string` KHÔNG gán được vào control khai báo
+   * `(value: string | number | null) => void`. `unknown` nhận được mọi control.
+   */
+  'onUpdate:modelValue': (value: unknown) => void
+  'onBlur': (event?: Event) => void
+  'name': string
+  'id': string
+  'aria-describedby': string | undefined
+  'aria-invalid': true | undefined
+}
+
+export interface FieldSlotProps<T = string> {
+  /** Bind thẳng vào control: <Input v-bind="field" /> */
+  field: FieldBindings<T>
+  value: T
+  setValue: (value: T) => void
+  errorMessage: string | undefined
+  invalid: boolean
+  /** id của control, dùng khi cần nối label thủ công */
+  id: string
+}
+
+/**
+ * Những gì `<Form>` expose ra ngoài qua template ref.
+ *
+ * Khai thành interface riêng để bên gọi tự viết kiểu cho `useTemplateRef` —
+ * `Form` là generic component nên `InstanceType<typeof Form>` không dùng được.
+ */
+export interface FormExpose {
+  /** Về giá trị khởi tạo, xoá luôn lỗi server đang hiện. */
+  resetForm: () => void
+  /** Map lỗi của API (ModelState / ProblemDetails.errors) về từng field. */
+  setErrors: (fields: Record<string, string>) => void
+  setFieldError: (name: string, message: string) => void
+  values: Readonly<Ref<Record<string, unknown>>>
+  errors: Readonly<Ref<Record<string, string | undefined>>>
+  isSubmitting: Readonly<Ref<boolean>>
+}

package/src/components/hover-card/HoverCard.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HoverCardRootEmits, HoverCardRootProps } from 'reka-ui'
+import { HoverCardRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = withDefaults(
+  defineProps<HoverCardRootProps>(),
+  {
+    /**
+     * Reka mặc định 700ms — quá lâu cho một thẻ xem nhanh: rê qua tên người rồi
+     * chờ gần một giây mới thấy gì thì người ta đã bỏ đi. 300ms là mức vẫn chặn
+     * được thẻ nhảy ra khi chỉ lướt chuột ngang qua.
+     */
+    openDelay: 300,
+    /** Đóng chậm hơn mở, để còn kịp rê chuột từ trigger sang chính thẻ. */
+    closeDelay: 200,
+  },
+)
+const emits = defineEmits<HoverCardRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <HoverCardRoot v-bind="forwarded">
+    <slot />
+  </HoverCardRoot>
+</template>

package/src/components/hover-card/HoverCardContent.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { HoverCardContentProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { HoverCardContent, HoverCardPortal } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = withDefaults(
+  defineProps<HoverCardContentProps & ClassProps>(),
+  { sideOffset: 6, align: 'center', collisionPadding: 8 },
+)
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      v-bind="delegated"
+      :class="cn(
+        'surface z-(--z-overlay) w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out',
+        'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0',
+        'data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95',
+        'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',
+        'data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2',
+        props.class,
+      )"
+    >
+      <slot />
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>

package/src/components/hover-card/HoverCardTrigger.vue

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

package/src/components/hover-card/index.ts

@@ -0,0 +1,3 @@
+export { default as HoverCard } from './HoverCard.vue'
+export { default as HoverCardContent } from './HoverCardContent.vue'
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue'

package/src/components/ifta-label/IftaLabel.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ClassProps>()
+</script>
+
+<template>
+  <div
+    :class="cn(
+      'relative w-full',
+
+      // Ô cao 52px: nhãn 6..22, giá trị 24..44, chừa 8 ở đáy.
+      '[&_input]:h-13 [&_input]:pt-6 [&_input]:pb-2',
+
+      // Nhãn đứng yên một chỗ, nên không có transition nào ở đây cả.
+      '[&>label]:pointer-events-none [&>label]:absolute [&>label]:left-3 [&>label]:top-1.5 [&>label]:z-(--z-raised)',
+      '[&>label]:text-xs [&>label]:font-normal [&>label]:text-muted-foreground',
+      'has-[input:disabled]:[&>label]:opacity-50',
+
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/ifta-label/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,89 @@
+export * from './accordion'
+export * from './alert'
+export * from './avatar'
+export * from './badge'
+export * from './breadcrumb'
+export * from './button'
+export * from './button-group'
+export * from './calendar'
+export * from './card'
+export * from './carousel'
+export * from './cascade-select'
+export * from './chart'
+export * from './checkbox'
+export * from './chip'
+export * from './code-block'
+export * from './collapsible'
+export * from './combobox'
+export * from './command'
+export * from './command-block'
+export * from './confirm-dialog'
+export * from './confirm-popup'
+export * from './context-menu'
+export * from './data-table'
+export * from './data-view'
+export * from './date-picker'
+export * from './deferred'
+export * from './dialog'
+export * from './doc-example'
+export * from './doc-text'
+export * from './dropdown-menu'
+export * from './editable'
+export * from './empty'
+export * from './field'
+export * from './fieldset'
+export * from './file-upload'
+export * from './float-label'
+export * from './form'
+export * from './hover-card'
+export * from './ifta-label'
+export * from './input'
+export * from './input-color'
+export * from './input-group'
+export * from './input-number'
+export * from './input-otp'
+export * from './input-password'
+export * from './input-tags'
+export * from './kbd'
+export * from './label'
+export * from './listbox'
+export * from './mask'
+export * from './menubar'
+export * from './navigation-menu'
+export * from './order-list'
+export * from './pagination'
+export * from './panel'
+export * from './pick-list'
+export * from './popover'
+export * from './progress'
+export * from './props-table'
+export * from './radio-group'
+export * from './rating'
+export * from './scroll-area'
+export * from './search-input'
+export * from './select'
+export * from './separator'
+export * from './sheet'
+export * from './sidebar'
+export * from './skeleton'
+export * from './skip-link'
+export * from './slider'
+export * from './speed-dial'
+export * from './spinner'
+export * from './splitter'
+export * from './stepper'
+export * from './switch'
+export * from './table'
+export * from './tabs'
+export * from './textarea'
+export * from './theme-controls'
+export * from './timeline'
+export * from './toast'
+export * from './toggle'
+export * from './token-table'
+export * from './toolbar'
+export * from './tooltip'
+export * from './tree'
+export * from './tree-select'
+export * from './tree-table'
+export * from './video-player'

package/src/components/input/Input.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import { computed } from 'vue'
+import { focusRing, invalidRing } from '../../lib/focus'
+import { Check } from '../../lib/icons'
+import { cn } from '../../lib/utils'
+import Spinner from '../spinner/Spinner.vue'
+
+/**
+ * Gốc của component là một `<div>` bọc ngoài, nên thuộc tính rơi tự do phải
+ * được chuyển tay vào đúng cái `<input>` — nếu không `id`, `name`,
+ * `aria-describedby` sẽ dính lên div và `<label for>` mất đích.
+ */
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    invalid?: boolean
+    /**
+     * Đã kiểm và hợp lệ. Hiện dấu tick **trong ô** — đúng chỗ mắt người dùng
+     * đang nhìn. Toast là lựa chọn sai cho việc này: nó kéo chú ý đi nơi khác
+     * rồi biến mất trước khi kịp đọc.
+     */
+    success?: boolean
+    /** Đang kiểm bất đồng bộ (trùng email, mã giảm giá…). */
+    loading?: boolean
+    /** sm = 30px, dùng cho toolbar/bộ lọc theo mật độ compact của thiết kế. */
+    size?: 'sm' | 'default'
+  }>(),
+  { size: 'default' },
+)
+
+// defineModel để Input dùng được với v-model và với FormField.
+const model = defineModel<string | number | null>()
+
+const sizeClass = computed(() =>
+  props.size === 'sm' ? 'h-(--ui-field-height-sm) px-(--ui-field-padding-x-sm) text-(length:--ui-field-text-sm)' : 'h-(--ui-field-height-md) px-(--ui-field-padding-x-md) text-sm',
+)
+
+/** Lỗi thắng tick: sai thì không còn gì để mà xác nhận là đúng. */
+const showSuccess = computed(() => props.success && !props.invalid && !props.loading)
+const hasAdornment = computed(() => props.loading || showSuccess.value)
+</script>
+
+<template>
+  <div class="relative w-full">
+    <input
+      v-bind="$attrs"
+      v-model="model"
+      :aria-invalid="props.invalid || undefined"
+      :data-invalid="props.invalid || undefined"
+      :aria-busy="props.loading || undefined"
+      :readonly="props.loading || undefined"
+      :class="cn(
+        'flex w-full rounded-md border border-input bg-background py-1 shadow-xs transition-colors',
+        sizeClass,
+        'placeholder:text-muted-foreground',
+        'file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
+        focusRing,
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        invalidRing,
+        // Chừa chỗ cho icon, nếu không chữ chui xuống dưới nó.
+        hasAdornment && (props.size === 'sm' ? 'pr-8' : 'pr-9'),
+        props.class,
+      )"
+    >
+
+    <!--
+      `loading` khoá ô bằng `readonly`, KHÔNG bằng `disabled`.
+
+      `disabled` cướp focus khỏi phần tử người dùng đang đứng, nên giữa lúc
+      kiểm tra họ mất luôn vị trí trong form — và `disabled` còn có nghĩa "bạn
+      không được phép", khác hẳn "đang chạy". `readonly` chặn gõ mà vẫn giữ
+      focus, vẫn copy được; `aria-busy` nói phần còn lại cho trình đọc màn hình.
+    -->
+    <span
+      v-if="hasAdornment"
+      :class="cn(
+        'pointer-events-none absolute top-1/2 -translate-y-1/2',
+        props.size === 'sm' ? 'right-2.5' : 'right-3',
+      )"
+    >
+      <Spinner v-if="props.loading" class="text-muted-foreground" />
+      <Check v-else class="size-4 text-success" aria-hidden="true" />
+    </span>
+  </div>
+</template>

package/src/components/input/index.ts

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

package/src/components/input-color/ColorArea.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { ColorAreaRootEmits, ColorAreaRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ColorAreaArea, ColorAreaRoot, ColorAreaThumb, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ColorAreaRootProps & ClassProps>()
+const emits = defineEmits<ColorAreaRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <!--
+    `ColorAreaArea` KHÔNG tự tô nền — nó chỉ đặt `touch-action: none`. Dải màu
+    nằm ở `style` mà slot của root trả về, và phải tự bind sang. Quên là ra một
+    ô xám trơn vẫn kéo được, tức hỏng mà nhìn như đang tải dở.
+  -->
+  <ColorAreaRoot
+    v-slot="{ style }"
+    v-bind="forwarded"
+    :class="cn('relative h-40 w-full touch-none select-none rounded-md border border-border', props.class)"
+  >
+    <ColorAreaArea :style="style" class="size-full rounded-[inherit]">
+      <ColorAreaThumb
+        class="size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,.35)] outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      />
+    </ColorAreaArea>
+  </ColorAreaRoot>
+</template>

package/src/components/input-color/ColorField.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { ColorFieldRootEmits, ColorFieldRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ColorFieldInput, ColorFieldRoot, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { focusRing } from '../../lib/focus'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ColorFieldRootProps & ClassProps>()
+const emits = defineEmits<ColorFieldRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <!-- Ô nhập hex hoặc một kênh màu. `font-mono` vì đây là mã, không phải chữ —
+       và mã màu thì hay được đọc theo từng ký tự. -->
+  <ColorFieldRoot v-bind="forwarded" :class="cn('w-full', props.class)">
+    <ColorFieldInput
+      :class="cn(
+        'h-8 w-full rounded-md border border-input bg-background px-2 font-mono text-xs uppercase shadow-xs transition-colors',
+        focusRing,
+        'disabled:cursor-not-allowed disabled:opacity-50',
+      )"
+    />
+  </ColorFieldRoot>
+</template>

package/src/components/input-color/ColorSlider.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { ColorSliderRootEmits, ColorSliderRootProps } from 'reka-ui'
+import type { ClassProps } from '../../lib/types'
+import { ColorSliderRoot, ColorSliderThumb, ColorSliderTrack, useForwardPropsEmits } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+
+const props = defineProps<ColorSliderRootProps & ClassProps>()
+const emits = defineEmits<ColorSliderRootEmits>()
+
+const delegated = computed(() => {
+  const { class: _class, ...rest } = props
+  return rest
+})
+
+const forwarded = useForwardPropsEmits(delegated, emits)
+</script>
+
+<template>
+  <!-- Khác `ColorArea`: rãnh ở đây TỰ tô, reka bind nền thẳng lên `Track`. -->
+  <ColorSliderRoot
+    v-bind="forwarded"
+    :class="cn('relative flex h-4 w-full touch-none select-none items-center', props.class)"
+  >
+    <ColorSliderTrack class="h-3 w-full rounded-full border border-border">
+      <ColorSliderThumb
+        class="size-4 -translate-x-1/2 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,.35)] outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      />
+    </ColorSliderTrack>
+  </ColorSliderRoot>
+</template>

package/src/components/input-color/InputColor.vue

@@ -0,0 +1,65 @@
+<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 Popover from '../popover/Popover.vue'
+import PopoverContent from '../popover/PopoverContent.vue'
+import PopoverTrigger from '../popover/PopoverTrigger.vue'
+import ColorArea from './ColorArea.vue'
+import ColorField from './ColorField.vue'
+import ColorSlider from './ColorSlider.vue'
+
+/**
+ * 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 chính cái trigger.
+ */
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<ClassProps & {
+  /** Nhãn trợ năng cho nút mở. Bỏ trống thì lấy chuỗi của thư viện. */
+  label?: string
+  disabled?: boolean
+}>()
+
+const model = defineModel<string>({ default: '#2563EB' })
+
+const { t } = useI18n()
+
+const label = computed(() => props.label ?? t('ui.inputColor.open'))
+</script>
+
+<template>
+  <Popover>
+    <PopoverTrigger
+      v-bind="$attrs"
+      :disabled="props.disabled"
+      :aria-label="`${label}: ${model}`"
+      :class="cn(
+        'inline-flex h-9 items-center gap-2 rounded-md border border-input bg-background px-2 pr-3 shadow-xs transition-colors',
+        'hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        'disabled:pointer-events-none disabled:opacity-50',
+        props.class,
+      )"
+    >
+      <!--
+        Ô màu đặt trên nền ca-rô, không phải nền trơn: màu có alpha thấp nằm
+        trên nền trắng thì trông hệt như trắng, và người dùng không có cách nào
+        biết mình vừa chọn một màu gần như trong suốt.
+      -->
+      <span class="size-5 shrink-0 overflow-hidden rounded-sm border border-border bg-[repeating-conic-gradient(theme(colors.slate.400)_0_25%,transparent_0_50%)] bg-[length:8px_8px]">
+        <span class="block size-full" :style="{ background: model }" />
+      </span>
+      <span class="font-mono text-xs uppercase">{{ model }}</span>
+    </PopoverTrigger>
+
+    <PopoverContent class="w-60 space-y-3 p-3">
+      <ColorArea v-model="model" color-space="hsb" x-channel="saturation" y-channel="brightness" />
+      <ColorSlider v-model="model" color-space="hsb" channel="hue" />
+      <ColorField v-model="model" />
+    </PopoverContent>
+  </Popover>
+</template>

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

@@ -0,0 +1,16 @@
+/**
+ * Bộ chọn màu. `<InputColor v-model="brand" />` là một nút ô màu mở ra popover
+ * gồm vùng bão-hoà/độ-sáng, thanh sắc và ô nhập hex.
+ *
+ * Ba phần bên trong cũng export riêng cho lúc cần dựng bố cục khác — ví dụ một
+ * bảng màu luôn hiện trong trang cài đặt, không qua popover.
+ *
+ * Cái bẫy đáng nhớ: `ColorAreaArea` **không tự tô nền**. Dải màu nằm ở `style`
+ * mà slot của root trả về; `ColorArea.vue` bind nó sang. Còn `ColorSliderTrack`
+ * thì ngược lại, reka tô sẵn.
+ */
+
+export { default as ColorArea } from './ColorArea.vue'
+export { default as ColorField } from './ColorField.vue'
+export { default as ColorSlider } from './ColorSlider.vue'
+export { default as InputColor } from './InputColor.vue'

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ClassProps } from '../../lib/types'
+import type { InputGroupVariants } from './index'
+import { computed } from 'vue'
+import { cn } from '../../lib/utils'
+import { inputGroupVariants, provideInputGroupContext } from './index'
+
+const props = withDefaults(
+  defineProps<ClassProps & {
+    size?: InputGroupVariants['size']
+    invalid?: boolean
+  }>(),
+  { size: 'default', invalid: false },
+)
+
+provideInputGroupContext({ size: computed(() => props.size) })
+</script>
+
+<template>
+  <div
+    :data-invalid="props.invalid || undefined"
+    :class="cn(inputGroupVariants({ size: props.size }), props.class)"
+  >
+    <slot />
+  </div>
+</template>