@slexn/codecenter-ui 1.0.0

package/public/r/commit.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "commit",
+  "title": "Commit",
+  "description": "A collapsible commit summary card with changed files, status letters, line stats, and copy action.",
+  "dependencies": [
+    "@lucide/vue",
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/commit/Commit.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, ref } from \"vue\"\nimport type { HTMLAttributes } from \"vue\"\nimport {\n  CheckIcon,\n  ChevronDownIcon,\n  CopyIcon,\n  FileIcon,\n  GitCommitHorizontalIcon,\n} from \"@lucide/vue\"\nimport { cn } from \"@/lib/utils\"\n\nexport type CommitFileStatus = \"added\" | \"modified\" | \"deleted\" | \"renamed\"\nexport type CommitSize = \"sm\" | \"default\" | \"lg\"\n\nexport interface CommitFile {\n  additions?: number\n  deletions?: number\n  path: string\n  status?: CommitFileStatus\n}\n\nexport interface CommitCopyPayload {\n  value: string\n}\n\nexport interface CommitFileSelectPayload {\n  file: CommitFile\n  index: number\n}\n\nexport interface CommitTogglePayload {\n  open: boolean\n}\n\ninterface CommitProps {\n  authorInitials?: string\n  authorName?: string\n  avatarLabel?: string\n  class?: HTMLAttributes[\"class\"]\n  collapsible?: boolean\n  copiedLabel?: string\n  copyLabel?: string\n  copyValue?: string\n  date?: string\n  defaultOpen?: boolean\n  emptyLabel?: string\n  files?: CommitFile[]\n  hash?: string\n  message?: string\n  open?: boolean\n  showCopy?: boolean\n  showToggle?: boolean\n  size?: CommitSize\n}\n\nconst props = withDefaults(defineProps<CommitProps>(), {\n  authorInitials: \"CC\",\n  collapsible: true,\n  copiedLabel: \"Copied\",\n  copyLabel: \"Copy commit hash\",\n  defaultOpen: true,\n  emptyLabel: \"No changed files.\",\n  message: \"Commit message\",\n  showCopy: true,\n  showToggle: true,\n  size: \"default\",\n})\n\nconst emit = defineEmits<{\n  \"copy\": [payload: CommitCopyPayload]\n  \"file-select\": [payload: CommitFileSelectPayload]\n  \"toggle\": [payload: CommitTogglePayload]\n  \"update:open\": [value: boolean]\n}>()\n\nconst copied = ref(false)\nconst localOpen = ref(props.defaultOpen)\nlet copiedTimeout: ReturnType<typeof setTimeout> | undefined\n\nconst commitFiles = computed(() => props.files ?? [])\nconst copyText = computed(() => props.copyValue ?? props.hash ?? props.message)\nconst copyButtonLabel = computed(() => copied.value ? props.copiedLabel : props.copyLabel)\nconst isOpen = computed(() => {\n  if (!props.collapsible) return true\n\n  return props.open ?? localOpen.value\n})\nconst sizeClasses = computed(() => {\n  if (props.size === \"sm\") {\n    return {\n      avatar: \"size-7\",\n      avatarIcon: \"size-3.5\",\n      copyButton: \"size-7\",\n      copyIcon: \"size-3.5\",\n      empty: \"px-3 py-2.5 text-xs\",\n      fileIcon: \"size-3.5\",\n      files: \"py-1.5\",\n      header: \"gap-2.5 px-3 py-2.5\",\n      headerBorder: isOpen.value ? \"border-b\" : \"\",\n      innerGap: \"gap-2.5\",\n      meta: \"mt-0.5 gap-1.5 text-xs\",\n      path: \"text-xs\",\n      row: \"grid-cols-[0.75rem_0.875rem_minmax(0,1fr)_auto] gap-2 px-3 py-1\",\n      stats: \"gap-1.5 text-xs\",\n      status: \"text-xs\",\n      title: \"text-xs\",\n      toggleButton: \"size-7\",\n      toggleIcon: \"size-3.5\",\n    }\n  }\n\n  if (props.size === \"lg\") {\n    return {\n      avatar: \"size-10\",\n      avatarIcon: \"size-5\",\n      copyButton: \"size-9\",\n      copyIcon: \"size-4\",\n      empty: \"px-5 py-4 text-xs\",\n      fileIcon: \"size-4\",\n      files: \"py-3\",\n      header: \"gap-3 px-5 py-4\",\n      headerBorder: isOpen.value ? \"border-b\" : \"\",\n      innerGap: \"gap-3\",\n      meta: \"mt-1 gap-2 text-xs\",\n      path: \"text-xs\",\n      row: \"grid-cols-[0.875rem_1rem_minmax(0,1fr)_auto] gap-2.5 px-5 py-2\",\n      stats: \"gap-2 text-xs\",\n      status: \"text-xs\",\n      title: \"text-sm\",\n      toggleButton: \"size-9\",\n      toggleIcon: \"size-4\",\n    }\n  }\n\n  return {\n    avatar: \"size-8\",\n    avatarIcon: \"size-4\",\n    copyButton: \"size-8\",\n    copyIcon: \"size-4\",\n    empty: \"px-4 py-3 text-xs\",\n    fileIcon: \"size-3.5\",\n    files: \"py-2\",\n    header: \"gap-2.5 px-4 py-3\",\n    headerBorder: isOpen.value ? \"border-b\" : \"\",\n    innerGap: \"gap-2.5\",\n    meta: \"mt-0.5 gap-1.5 text-xs\",\n    path: \"text-xs\",\n    row: \"grid-cols-[0.75rem_0.875rem_minmax(0,1fr)_auto] gap-2 px-4 py-1.5\",\n    stats: \"gap-1.5 text-xs\",\n    status: \"text-xs\",\n    title: \"text-[13px]\",\n    toggleButton: \"size-8\",\n    toggleIcon: \"size-4\",\n  }\n})\n\nonBeforeUnmount(() => {\n  if (copiedTimeout) clearTimeout(copiedTimeout)\n})\n\nfunction statusLabel(status: CommitFileStatus = \"modified\") {\n  if (status === \"added\") return \"A\"\n  if (status === \"deleted\") return \"D\"\n  if (status === \"renamed\") return \"R\"\n\n  return \"M\"\n}\n\nfunction statusClass(status: CommitFileStatus = \"modified\") {\n  if (status === \"added\") return \"text-emerald-600\"\n  if (status === \"deleted\") return \"text-destructive\"\n  if (status === \"renamed\") return \"text-sky-600\"\n\n  return \"text-amber-600\"\n}\n\nfunction formatAddition(value?: number) {\n  if (!value) return \"\"\n\n  return `+${value.toLocaleString()}`\n}\n\nfunction formatDeletion(value?: number) {\n  if (!value) return \"\"\n\n  return `-${value.toLocaleString()}`\n}\n\nasync function handleCopy() {\n  const value = copyText.value\n\n  emit(\"copy\", { value })\n\n  try {\n    if (typeof navigator !== \"undefined\" && navigator.clipboard) {\n      await navigator.clipboard.writeText(value)\n    }\n  } catch {\n    // Clipboard writes can be blocked by the runtime; keep the UI response and event.\n  }\n\n  copied.value = true\n\n  if (copiedTimeout) clearTimeout(copiedTimeout)\n  copiedTimeout = setTimeout(() => {\n    copied.value = false\n  }, 1600)\n}\n\nfunction setOpen(nextOpen: boolean) {\n  if (!props.collapsible) return\n\n  const previousOpen = isOpen.value\n\n  if (props.open === undefined) {\n    localOpen.value = nextOpen\n  }\n\n  emit(\"update:open\", nextOpen)\n\n  if (previousOpen !== nextOpen) {\n    emit(\"toggle\", { open: nextOpen })\n  }\n}\n\nfunction toggleOpen() {\n  setOpen(!isOpen.value)\n}\n\nfunction handleFileSelect(file: CommitFile, index: number) {\n  emit(\"file-select\", {\n    file,\n    index,\n  })\n}\n</script>\n\n<template>\n  <article\n    data-slot=\"commit\"\n    :data-open=\"isOpen\"\n    :data-size=\"props.size\"\n    :class=\"cn('overflow-hidden rounded-xl border bg-card text-card-foreground shadow-xs', props.class)\"\n  >\n    <header\n      data-slot=\"commit-header\"\n      :class=\"cn('flex items-center transition-colors', sizeClasses.header, sizeClasses.headerBorder)\"\n    >\n      <component\n        :is=\"props.collapsible ? 'button' : 'div'\"\n        data-slot=\"commit-toggle\"\n        :type=\"props.collapsible ? 'button' : undefined\"\n        :aria-expanded=\"props.collapsible ? isOpen : undefined\"\n        :class=\"cn('flex min-w-0 flex-1 items-center text-left outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50', sizeClasses.innerGap)\"\n        @click=\"toggleOpen\"\n      >\n        <span\n          data-slot=\"commit-avatar\"\n          :aria-label=\"props.avatarLabel ?? props.authorName ?? 'Commit'\"\n          :class=\"cn('flex shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground', sizeClasses.avatar)\"\n        >\n          <GitCommitHorizontalIcon\n            data-slot=\"commit-avatar-icon\"\n            aria-hidden=\"true\"\n            :class=\"sizeClasses.avatarIcon\"\n          />\n        </span>\n\n        <span data-slot=\"commit-title-group\" class=\"min-w-0 flex-1 pt-0.5\">\n          <span\n            data-slot=\"commit-message\"\n            :class=\"cn('block truncate font-semibold leading-tight tracking-normal', sizeClasses.title)\"\n          >\n            {{ props.message }}\n          </span>\n\n          <span\n            data-slot=\"commit-meta\"\n            :class=\"cn('flex min-w-0 flex-wrap items-center leading-tight text-muted-foreground', sizeClasses.meta)\"\n          >\n            <span\n              v-if=\"props.hash\"\n              data-slot=\"commit-hash\"\n              class=\"inline-flex min-w-0 items-center font-mono\"\n            >\n              <span class=\"truncate\">{{ props.hash }}</span>\n            </span>\n\n            <span\n              v-if=\"props.hash && props.date\"\n              data-slot=\"commit-meta-separator\"\n              aria-hidden=\"true\"\n            >\n              •\n            </span>\n\n            <span v-if=\"props.date\" data-slot=\"commit-date\">\n              {{ props.date }}\n            </span>\n          </span>\n        </span>\n      </component>\n\n      <button\n        v-if=\"props.showCopy\"\n        data-slot=\"commit-copy\"\n        type=\"button\"\n        :aria-label=\"copyButtonLabel\"\n        :class=\"\n          cn(\n            'inline-flex shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',\n            sizeClasses.copyButton,\n            copied && 'text-emerald-600',\n          )\n        \"\n        @click=\"handleCopy\"\n      >\n        <CheckIcon\n          v-if=\"copied\"\n          data-slot=\"commit-copy-icon\"\n          aria-hidden=\"true\"\n          :class=\"sizeClasses.copyIcon\"\n        />\n        <CopyIcon\n          v-else\n          data-slot=\"commit-copy-icon\"\n          aria-hidden=\"true\"\n          :class=\"sizeClasses.copyIcon\"\n        />\n      </button>\n\n      <button\n        v-if=\"props.collapsible && props.showToggle\"\n        data-slot=\"commit-toggle-icon\"\n        type=\"button\"\n        :aria-label=\"isOpen ? 'Collapse commit' : 'Expand commit'\"\n        :aria-expanded=\"isOpen\"\n        :class=\"\n          cn(\n            'inline-flex shrink-0 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',\n            sizeClasses.toggleButton,\n          )\n        \"\n        @click=\"toggleOpen\"\n      >\n        <ChevronDownIcon\n          aria-hidden=\"true\"\n          :class=\"cn('transition-transform', sizeClasses.toggleIcon, !isOpen && '-rotate-90')\"\n        />\n      </button>\n    </header>\n\n    <ul\n      v-if=\"isOpen && commitFiles.length\"\n      data-slot=\"commit-files\"\n      :class=\"cn('flex flex-col', sizeClasses.files)\"\n    >\n      <li\n        v-for=\"(file, index) in commitFiles\"\n        :key=\"`${file.status ?? 'modified'}-${file.path}-${index}`\"\n        data-slot=\"commit-file-item\"\n      >\n        <button\n          data-slot=\"commit-file\"\n          type=\"button\"\n          :data-status=\"file.status ?? 'modified'\"\n          :class=\"cn('grid w-full items-center text-left outline-none transition-colors hover:bg-muted/50 focus-visible:bg-muted/70', sizeClasses.row)\"\n          @click=\"handleFileSelect(file, index)\"\n        >\n          <span\n            data-slot=\"commit-file-status\"\n            :class=\"cn('font-mono font-semibold leading-none', sizeClasses.status, statusClass(file.status))\"\n          >\n            {{ statusLabel(file.status) }}\n          </span>\n\n          <FileIcon\n            data-slot=\"commit-file-icon\"\n            aria-hidden=\"true\"\n            :class=\"cn('text-muted-foreground', sizeClasses.fileIcon)\"\n          />\n\n          <span\n            data-slot=\"commit-file-path\"\n            :class=\"cn('min-w-0 truncate font-mono leading-tight text-foreground', sizeClasses.path)\"\n          >\n            {{ file.path }}\n          </span>\n\n          <span\n            data-slot=\"commit-file-stats\"\n            :class=\"cn('flex shrink-0 items-center justify-end font-mono leading-tight', sizeClasses.stats)\"\n          >\n            <span\n              v-if=\"formatAddition(file.additions)\"\n              data-slot=\"commit-file-additions\"\n              class=\"text-emerald-600\"\n            >\n              {{ formatAddition(file.additions) }}\n            </span>\n\n            <span\n              v-if=\"formatDeletion(file.deletions)\"\n              data-slot=\"commit-file-deletions\"\n              class=\"text-destructive\"\n            >\n              {{ formatDeletion(file.deletions) }}\n            </span>\n          </span>\n        </button>\n      </li>\n    </ul>\n\n    <div\n      v-else-if=\"isOpen\"\n      data-slot=\"commit-empty\"\n      :class=\"cn('text-muted-foreground', sizeClasses.empty)\"\n    >\n      {{ props.emptyLabel }}\n    </div>\n  </article>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/commit/Commit.vue"
+    },
+    {
+      "path": "src/components/ui/commit/index.ts",
+      "content": "export { default as Commit } from \"./Commit.vue\"\nexport type {\n  CommitCopyPayload,\n  CommitFile,\n  CommitFileSelectPayload,\n  CommitFileStatus,\n  CommitSize,\n  CommitTogglePayload,\n} from \"./Commit.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/commit/index.ts"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/contribution-graph.json

@@ -0,0 +1,63 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "contribution-graph",
+  "title": "Contribution Graph",
+  "description": "A calendar heatmap for contribution activity with month labels, weekday labels, tooltips, selection, and intensity legend.",
+  "dependencies": [
+    "@vueuse/core",
+    "clsx",
+    "reka-ui",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/contribution-graph/ContributionGraph.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref } from \"vue\"\nimport type { CSSProperties, HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"../tooltip\"\n\nexport type ContributionGraphSize = \"default\" | \"lg\" | \"sm\"\nexport type ContributionGraphWeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6\n\nexport interface ContributionGraphItem {\n  count: number\n  date: Date | string\n  label?: string\n}\n\nexport interface ContributionGraphDay {\n  count: number\n  date: string\n  day: number\n  label: string\n  level: number\n  outside: boolean\n  row: number\n  weekday: number\n}\n\nexport interface ContributionGraphSelectPayload extends ContributionGraphDay {\n  item?: ContributionGraphItem\n}\n\nexport interface ContributionGraphYearSelectPayload {\n  endDate: string\n  startDate: string\n  year: number\n}\n\ninterface NormalizedContributionItem extends ContributionGraphItem {\n  count: number\n  date: string\n}\n\ninterface ContributionGraphProps {\n  activeLabel?: string\n  class?: HTMLAttributes[\"class\"]\n  description?: string\n  emptyLabel?: string\n  endDate?: Date | string\n  fitWidth?: boolean\n  gridClass?: HTMLAttributes[\"class\"]\n  items?: ContributionGraphItem[]\n  legendLabel?: string\n  lessLabel?: string\n  locale?: string\n  maxCount?: number\n  modelValue?: string\n  moreLabel?: string\n  showLegend?: boolean\n  showMonthLabels?: boolean\n  showSummary?: boolean\n  showWeekdayLabels?: boolean\n  showYearSelector?: boolean\n  size?: ContributionGraphSize\n  startDate?: Date | string\n  summary?: string\n  title?: string\n  totalLabel?: string\n  weekStart?: ContributionGraphWeekStart\n  weeks?: number\n  year?: number | string\n  yearOptions?: Array<number | string>\n  yearSelectorLabel?: string\n}\n\nconst props = withDefaults(defineProps<ContributionGraphProps>(), {\n  activeLabel: \"active days\",\n  emptyLabel: \"No contributions\",\n  fitWidth: true,\n  legendLabel: \"Contribution intensity\",\n  lessLabel: \"Less\",\n  moreLabel: \"More\",\n  showLegend: true,\n  showMonthLabels: true,\n  showSummary: true,\n  showWeekdayLabels: false,\n  showYearSelector: true,\n  size: \"default\",\n  totalLabel: \"contributions\",\n  weekStart: 0,\n  yearSelectorLabel: \"Contribution years\",\n})\n\nconst emit = defineEmits<{\n  \"select\": [day: ContributionGraphSelectPayload]\n  \"update:modelValue\": [date: string]\n  \"update:year\": [year: number]\n  \"year-change\": [payload: ContributionGraphYearSelectPayload]\n}>()\n\nconst dayMs = 24 * 60 * 60 * 1000\nconst graphViewport = ref<HTMLElement | null>(null)\nconst graphWidth = ref<number | null>(null)\nconst internalYear = ref<number | null>(null)\nlet resizeObserver: ResizeObserver | undefined\n\nonMounted(() => {\n  const element = graphViewport.value\n\n  if (!element || typeof ResizeObserver === \"undefined\") return\n\n  graphWidth.value = element.clientWidth\n  resizeObserver = new ResizeObserver((entries) => {\n    graphWidth.value = Math.round(entries[0]?.contentRect.width ?? element.clientWidth)\n  })\n  resizeObserver.observe(element)\n})\n\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect()\n})\n\nconst dateFormatter = computed(() =>\n  new Intl.DateTimeFormat(props.locale, {\n    day: \"numeric\",\n    month: \"short\",\n    year: \"numeric\",\n  }),\n)\nconst monthFormatter = computed(() =>\n  new Intl.DateTimeFormat(props.locale, {\n    month: \"short\",\n  }),\n)\nconst weekdayFormatter = computed(() =>\n  new Intl.DateTimeFormat(props.locale, {\n    weekday: \"short\",\n  }),\n)\nconst numberFormatter = computed(() =>\n  new Intl.NumberFormat(props.locale, {\n    maximumFractionDigits: 0,\n  }),\n)\nconst baseEndDate = computed(() => stripTime(parseDate(props.endDate) ?? new Date()))\nconst selectedYear = computed(() =>\n  normalizeYear(props.year) ?? internalYear.value ?? baseEndDate.value.getFullYear(),\n)\n\nconst range = computed(() => {\n  if (props.showYearSelector) {\n    return getContributionYearRange(selectedYear.value)\n  }\n\n  const rawEnd = baseEndDate.value\n  const defaultStart = props.weeks\n    ? addDays(rawEnd, -(Math.max(1, Math.trunc(props.weeks)) * 7) + 1)\n    : getOneYearStart(rawEnd)\n  const parsedStart = parseDate(props.startDate)\n  const rawStart = stripTime(parsedStart ?? defaultStart)\n\n  if (rawStart <= rawEnd) {\n    return {\n      end: rawEnd,\n      start: rawStart,\n    }\n  }\n\n  return {\n    end: rawStart,\n    start: rawEnd,\n  }\n})\n\nconst normalizedItems = computed(() => {\n  const items = new Map<string, NormalizedContributionItem>()\n\n  for (const item of props.items ?? []) {\n    const date = parseDate(item.date)\n\n    if (!date) continue\n\n    const key = formatLocalDate(date)\n    const existing = items.get(key)\n    const count = normalizeCount(item.count)\n\n    items.set(key, {\n      ...item,\n      count: (existing?.count ?? 0) + count,\n      date: key,\n      label: item.label ?? existing?.label,\n    })\n  }\n\n  return items\n})\n\nconst maxCount = computed(() => {\n  if (props.maxCount !== undefined) return Math.max(normalizeCount(props.maxCount), 0)\n\n  return Math.max(\n    0,\n    ...Array.from(normalizedItems.value.values(), (item) => item.count),\n  )\n})\n\nconst days = computed<ContributionGraphDay[]>(() => {\n  const totalDays = differenceInDays(range.value.start, range.value.end) + 1\n\n  return Array.from({ length: totalDays }, (_, index) => {\n    const date = addDays(range.value.start, index)\n    const key = formatLocalDate(date)\n    const item = normalizedItems.value.get(key)\n    const count = item?.count ?? 0\n    const level = getContributionLevel(count)\n\n    return {\n      count,\n      date: key,\n      day: date.getDate(),\n      label: item?.label ?? formatCellLabel(date, count),\n      level,\n      outside: false,\n      row: getWeekdayRow(date, props.weekStart),\n      weekday: date.getDay(),\n    }\n  })\n})\n\nconst calendarWeeks = computed(() => {\n  const grouped: ContributionGraphDay[][] = []\n  const weekMap = new Map<string, ContributionGraphDay[]>()\n\n  for (const day of days.value) {\n    const date = parseDate(day.date)\n\n    if (!date) continue\n\n    const key = formatLocalDate(startOfWeek(date, props.weekStart))\n    let week = weekMap.get(key)\n\n    if (!week) {\n      week = []\n      weekMap.set(key, week)\n      grouped.push(week)\n    }\n\n    week.push(day)\n  }\n\n  return grouped\n})\n\nconst weekCount = computed(() => calendarWeeks.value.length)\nconst totalCount = computed(() =>\n  days.value.reduce((total, day) => total + day.count, 0),\n)\nconst activeDays = computed(() =>\n  days.value.filter((day) => day.count > 0).length,\n)\nconst availableYears = computed(() => {\n  const configuredYears = props.yearOptions\n    ?.map((year) => normalizeYear(year))\n    .filter((year): year is number => year !== null)\n\n  if (configuredYears?.length) {\n    const years = new Set(configuredYears)\n    years.add(selectedYear.value)\n\n    return Array.from(years).sort((a, b) => b - a)\n  }\n\n  const years = new Set<number>([\n    baseEndDate.value.getFullYear(),\n    selectedYear.value,\n  ])\n\n  for (const item of normalizedItems.value.values()) {\n    const year = normalizeYear(item.date.slice(0, 4))\n\n    if (year !== null) years.add(year)\n  }\n\n  return Array.from(years).sort((a, b) => b - a)\n})\nconst hasYearSelector = computed(() =>\n  props.showYearSelector && availableYears.value.length > 0,\n)\nconst formattedSummary = computed(() => {\n  if (props.summary) return props.summary\n\n  return `${numberFormatter.value.format(totalCount.value)} ${props.totalLabel} · ${numberFormatter.value.format(activeDays.value)} ${props.activeLabel}`\n})\nconst hasHeader = computed(() =>\n  Boolean(props.title || props.description || props.showSummary),\n)\n\nconst monthLabelInterval = computed(() => {\n  if (!props.fitWidth || graphWidth.value === null) return 1\n  if (graphWidth.value < 360) return 4\n  if (graphWidth.value < 520) return 3\n  if (graphWidth.value < 680) return 2\n\n  return 1\n})\n\nconst monthLabels = computed(() => {\n  const labels: Array<{ column: number, key: string, label: string }> = []\n  let lastKey = \"\"\n\n  calendarWeeks.value.forEach((week, index) => {\n    const firstMonthDay =\n      week.find((day) => !day.outside && parseDate(day.date)?.getDate() === 1) ??\n      (index === 0 ? week.find((day) => !day.outside) : undefined)\n\n    if (!firstMonthDay) return\n\n    const date = parseDate(firstMonthDay.date)\n\n    if (!date) return\n\n    const key = `${date.getFullYear()}-${date.getMonth()}`\n\n    if (key === lastKey) return\n\n    labels.push({\n      column: index + 1,\n      key,\n      label: monthFormatter.value.format(date),\n    })\n    lastKey = key\n  })\n\n  return labels.map((label, index) => ({\n    ...label,\n    align: index === labels.length - 1 ? \"end\" : \"start\",\n    span: (labels[index + 1]?.column ?? weekCount.value + 1) - label.column,\n    visible:\n      monthLabelInterval.value <= 1 ||\n      labels.length <= 6 ||\n      index === 0 ||\n      index === labels.length - 1 ||\n      index % monthLabelInterval.value === 0,\n  }))\n})\n\nconst weekdayLabels = computed(() =>\n  Array.from({ length: 7 }, (_, index) => {\n    const weekday = (props.weekStart + index) % 7\n    const labelDate = new Date(2024, 0, 7 + weekday)\n    const shouldShow = weekday === 1 || weekday === 3 || weekday === 5\n\n    return {\n      key: weekday,\n      label: shouldShow ? weekdayFormatter.value.format(labelDate) : \"\",\n    }\n  }),\n)\n\nconst graphStyle = computed<CSSProperties>(() => ({\n  gridTemplateColumns: props.fitWidth\n    ? `repeat(${weekCount.value}, minmax(0, 1fr))`\n    : `repeat(${weekCount.value}, var(--contribution-graph-cell-size))`,\n}))\n\nconst rootStyle = computed<CSSProperties>(() => ({\n  \"--contribution-graph-cell-size\": getCellSize(props.size),\n  \"--contribution-graph-gap\": props.fitWidth ? \"0.125rem\" : \"0.25rem\",\n} as CSSProperties))\n\nfunction normalizeCount(value: number) {\n  if (!Number.isFinite(value)) return 0\n\n  return Math.max(0, Math.round(value))\n}\n\nfunction normalizeYear(value?: number | string | null) {\n  const year = typeof value === \"string\" ? Number(value) : value\n\n  if (typeof year !== \"number\" || !Number.isFinite(year)) return null\n\n  return Math.trunc(year)\n}\n\nfunction getContributionLevel(count: number) {\n  if (count <= 0 || maxCount.value <= 0) return 0\n\n  return Math.max(1, Math.min(4, Math.ceil((count / maxCount.value) * 4)))\n}\n\nfunction getCellSize(size: ContributionGraphSize) {\n  if (size === \"sm\") return \"0.625rem\"\n  if (size === \"lg\") return \"0.875rem\"\n\n  return \"0.75rem\"\n}\n\nfunction getOneYearStart(endDate: Date) {\n  const start = new Date(endDate)\n  start.setFullYear(start.getFullYear() - 1)\n\n  return addDays(start, 1)\n}\n\nfunction getContributionYearRange(year: number) {\n  const end = year === baseEndDate.value.getFullYear()\n    ? baseEndDate.value\n    : new Date(year, 11, 31)\n\n  return {\n    end,\n    start: getOneYearStart(end),\n  }\n}\n\nfunction parseDate(value?: Date | string | null) {\n  if (!value) return null\n\n  if (value instanceof Date) {\n    if (Number.isNaN(value.getTime())) return null\n\n    return stripTime(value)\n  }\n\n  const match = value.match(/^(\\d{4})-(\\d{2})-(\\d{2})/)\n\n  if (!match) return null\n\n  const [, year, month, day] = match\n  const date = new Date(Number(year), Number(month) - 1, Number(day))\n\n  if (Number.isNaN(date.getTime())) return null\n\n  return stripTime(date)\n}\n\nfunction stripTime(date: Date) {\n  return new Date(date.getFullYear(), date.getMonth(), date.getDate())\n}\n\nfunction addDays(date: Date, amount: number) {\n  const nextDate = new Date(date)\n  nextDate.setDate(nextDate.getDate() + amount)\n\n  return nextDate\n}\n\nfunction startOfWeek(date: Date, weekStart: ContributionGraphWeekStart) {\n  const day = date.getDay()\n  const diff = (day - weekStart + 7) % 7\n\n  return addDays(date, -diff)\n}\n\nfunction getWeekdayRow(date: Date, weekStart: ContributionGraphWeekStart) {\n  return ((date.getDay() - weekStart + 7) % 7) + 1\n}\n\nfunction differenceInDays(start: Date, end: Date) {\n  return Math.round((stripTime(end).getTime() - stripTime(start).getTime()) / dayMs)\n}\n\nfunction isDateInRange(date: Date, start: Date, end: Date) {\n  return date >= start && date <= end\n}\n\nfunction formatLocalDate(date: Date) {\n  const year = date.getFullYear()\n  const month = String(date.getMonth() + 1).padStart(2, \"0\")\n  const day = String(date.getDate()).padStart(2, \"0\")\n\n  return `${year}-${month}-${day}`\n}\n\nfunction formatCellLabel(date: Date, count: number) {\n  const formattedDate = dateFormatter.value.format(date)\n\n  if (count <= 0) return `${props.emptyLabel} on ${formattedDate}`\n\n  return `${numberFormatter.value.format(count)} ${props.totalLabel} on ${formattedDate}`\n}\n\nfunction handleSelect(day: ContributionGraphDay) {\n  if (day.outside) return\n\n  const item = normalizedItems.value.get(day.date)\n\n  emit(\"update:modelValue\", day.date)\n  emit(\"select\", {\n    ...day,\n    item,\n  })\n}\n\nfunction handleYearSelect(year: number) {\n  if (year === selectedYear.value) return\n\n  internalYear.value = year\n\n  const nextRange = getContributionYearRange(year)\n  const selectedDate = parseDate(props.modelValue)\n\n  emit(\"update:year\", year)\n  emit(\"year-change\", {\n    endDate: formatLocalDate(nextRange.end),\n    startDate: formatLocalDate(nextRange.start),\n    year,\n  })\n\n  if (!selectedDate || !isDateInRange(selectedDate, nextRange.start, nextRange.end)) {\n    emit(\"update:modelValue\", formatLocalDate(nextRange.end))\n  }\n}\n</script>\n\n<template>\n  <div\n    data-slot=\"contribution-graph\"\n    :class=\"cn('flex min-w-0 flex-col gap-4 text-sm', props.class)\"\n    :style=\"rootStyle\"\n  >\n    <div\n      v-if=\"hasHeader\"\n      data-slot=\"contribution-graph-header\"\n      class=\"flex flex-wrap items-end justify-between gap-3\"\n    >\n      <div v-if=\"props.title || props.description\" class=\"flex min-w-0 flex-col gap-1\">\n        <h3\n          v-if=\"props.title\"\n          data-slot=\"contribution-graph-title\"\n          class=\"truncate text-base font-semibold leading-none\"\n        >\n          {{ props.title }}\n        </h3>\n        <p\n          v-if=\"props.description\"\n          data-slot=\"contribution-graph-description\"\n          class=\"text-sm text-muted-foreground\"\n        >\n          {{ props.description }}\n        </p>\n      </div>\n\n      <p\n        v-if=\"props.showSummary\"\n        data-slot=\"contribution-graph-summary\"\n        class=\"shrink-0 text-sm font-medium text-muted-foreground\"\n      >\n        {{ formattedSummary }}\n      </p>\n    </div>\n\n    <div\n      data-slot=\"contribution-graph-body\"\n      :class=\"cn('flex min-w-0 flex-col gap-4', hasYearSelector && 'md:grid md:grid-cols-[minmax(0,1fr)_4.5rem] md:items-start')\"\n    >\n      <div data-slot=\"contribution-graph-main\" class=\"flex min-w-0 flex-col gap-4\">\n        <TooltipProvider>\n          <div\n            data-slot=\"contribution-graph-scroll\"\n            ref=\"graphViewport\"\n            :class=\"cn('min-w-0 pb-1', props.fitWidth ? 'overflow-visible' : 'overflow-x-auto')\"\n          >\n            <div\n              data-slot=\"contribution-graph-layout\"\n              :class=\"\n                cn(\n                  'gap-x-2 gap-y-1',\n                  props.fitWidth ? 'grid w-full min-w-0' : 'inline-grid min-w-max',\n                  props.showWeekdayLabels ? 'grid-cols-[2rem_minmax(0,1fr)]' : 'grid-cols-1',\n                  props.gridClass,\n                )\n              \"\n            >\n              <div\n                v-if=\"props.showWeekdayLabels && props.showMonthLabels\"\n                aria-hidden=\"true\"\n              />\n\n              <div\n                v-if=\"props.showMonthLabels\"\n                data-slot=\"contribution-graph-months\"\n                class=\"grid min-h-4 gap-[var(--contribution-graph-gap)] overflow-visible text-xs text-muted-foreground\"\n                :style=\"graphStyle\"\n              >\n                <span\n                  v-for=\"month in monthLabels\"\n                  :key=\"month.key\"\n                  v-show=\"month.visible\"\n                  class=\"whitespace-nowrap leading-none\"\n                  :style=\"{\n                    gridColumn: `${month.column} / span ${month.span}`,\n                    justifySelf: month.align,\n                  }\"\n                >\n                  {{ month.label }}\n                </span>\n              </div>\n\n              <div\n                v-if=\"props.showWeekdayLabels\"\n                data-slot=\"contribution-graph-weekdays\"\n                class=\"grid grid-rows-7 gap-1 py-px text-right text-xs leading-none text-muted-foreground\"\n              >\n                <span\n                  v-for=\"weekday in weekdayLabels\"\n                  :key=\"weekday.key\"\n                  class=\"flex h-[var(--contribution-graph-cell-size)] items-center justify-end\"\n                >\n                  {{ weekday.label }}\n                </span>\n              </div>\n\n              <div\n                data-slot=\"contribution-graph-grid\"\n                :class=\"\n                  cn(\n                    'grid gap-[var(--contribution-graph-gap)]',\n                    props.fitWidth ? 'w-full min-w-0' : 'min-w-max',\n                  )\n                \"\n                role=\"grid\"\n                :aria-label=\"props.title ?? 'Contribution graph'\"\n                :style=\"graphStyle\"\n              >\n                <div\n                  v-for=\"(week, weekIndex) in calendarWeeks\"\n                  :key=\"weekIndex\"\n                  data-slot=\"contribution-graph-week\"\n                  class=\"grid min-w-0 grid-rows-7 gap-[var(--contribution-graph-gap)]\"\n                  role=\"row\"\n                >\n                  <template\n                    v-for=\"contributionDay in week\"\n                    :key=\"contributionDay.date\"\n                  >\n                    <Tooltip>\n                      <TooltipTrigger as-child>\n                        <button\n                          data-slot=\"contribution-graph-cell\"\n                          type=\"button\"\n                          role=\"gridcell\"\n                          :aria-label=\"contributionDay.label\"\n                          :aria-selected=\"props.modelValue === contributionDay.date\"\n                          :data-level=\"contributionDay.level\"\n                          :data-outside=\"contributionDay.outside ? '' : undefined\"\n                          :disabled=\"contributionDay.outside\"\n                          :style=\"{ gridRow: contributionDay.row }\"\n                          :class=\"\n                            cn(\n                              'border border-border/60 bg-[var(--contribution-graph-level-0)] outline-none transition-[background-color,border-color,box-shadow,opacity,transform] hover:border-foreground/30 hover:ring-2 hover:ring-ring/30 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none data-[outside]:opacity-30 data-[level=1]:bg-[var(--contribution-graph-level-1)] data-[level=2]:bg-[var(--contribution-graph-level-2)] data-[level=3]:bg-[var(--contribution-graph-level-3)] data-[level=4]:bg-[var(--contribution-graph-level-4)] aria-selected:border-foreground aria-selected:ring-2 aria-selected:ring-ring/40',\n                              props.fitWidth\n                                ? 'aspect-square w-full min-w-0 rounded-[2px]'\n                                : 'size-[var(--contribution-graph-cell-size)] rounded-[3px]',\n                              contributionDay.count > 0 && 'hover:-translate-y-px',\n                            )\n                          \"\n                          @click=\"handleSelect(contributionDay)\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent>\n                        {{ contributionDay.label }}\n                      </TooltipContent>\n                    </Tooltip>\n                  </template>\n                </div>\n              </div>\n            </div>\n          </div>\n        </TooltipProvider>\n\n        <div\n          v-if=\"props.showLegend\"\n          data-slot=\"contribution-graph-legend\"\n          class=\"flex flex-wrap items-center justify-end gap-2 text-xs text-muted-foreground\"\n          :aria-label=\"props.legendLabel\"\n        >\n          <span>{{ props.lessLabel }}</span>\n          <span\n            v-for=\"level in [0, 1, 2, 3, 4]\"\n            :key=\"level\"\n            data-slot=\"contribution-graph-legend-cell\"\n            :data-level=\"level\"\n            class=\"size-[var(--contribution-graph-cell-size)] rounded-[3px] border border-border/60 bg-[var(--contribution-graph-level-0)] data-[level=1]:bg-[var(--contribution-graph-level-1)] data-[level=2]:bg-[var(--contribution-graph-level-2)] data-[level=3]:bg-[var(--contribution-graph-level-3)] data-[level=4]:bg-[var(--contribution-graph-level-4)]\"\n          />\n          <span>{{ props.moreLabel }}</span>\n        </div>\n      </div>\n\n      <nav\n        v-if=\"hasYearSelector\"\n        data-slot=\"contribution-graph-years\"\n        class=\"order-first flex min-w-0 gap-1 overflow-x-auto pb-1 md:order-none md:flex-col md:overflow-visible md:pb-0\"\n        :aria-label=\"props.yearSelectorLabel\"\n      >\n        <button\n          v-for=\"year in availableYears\"\n          :key=\"year\"\n          data-slot=\"contribution-graph-year\"\n          type=\"button\"\n          :aria-current=\"year === selectedYear ? 'date' : undefined\"\n          :aria-pressed=\"year === selectedYear\"\n          :data-state=\"year === selectedYear ? 'active' : 'inactive'\"\n          :class=\"\n            cn(\n              'inline-flex h-8 shrink-0 items-center justify-center rounded-md px-3 text-sm font-medium outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground md:w-full',\n            )\n          \"\n          @click=\"handleYearSelect(year)\"\n        >\n          {{ year }}\n        </button>\n      </nav>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/contribution-graph/ContributionGraph.vue"
+    },
+    {
+      "path": "src/components/ui/contribution-graph/index.ts",
+      "content": "export { default as ContributionGraph } from \"./ContributionGraph.vue\"\nexport type {\n  ContributionGraphDay,\n  ContributionGraphItem,\n  ContributionGraphSelectPayload,\n  ContributionGraphSize,\n  ContributionGraphWeekStart,\n  ContributionGraphYearSelectPayload,\n} from \"./ContributionGraph.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/contribution-graph/index.ts"
+    },
+    {
+      "path": "src/components/ui/tooltip/Tooltip.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { TooltipRootEmits, TooltipRootProps } from \"reka-ui\"\nimport { TooltipRoot, useForwardPropsEmits } from \"reka-ui\"\n\nconst props = defineProps<TooltipRootProps>()\nconst emits = defineEmits<TooltipRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <TooltipRoot\n    v-slot=\"slotProps\"\n    data-slot=\"tooltip\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </TooltipRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/tooltip/Tooltip.vue"
+    },
+    {
+      "path": "src/components/ui/tooltip/TooltipTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { TooltipTriggerProps } from \"reka-ui\"\nimport { TooltipTrigger } from \"reka-ui\"\n\nconst props = defineProps<TooltipTriggerProps>()\n</script>\n\n<template>\n  <TooltipTrigger\n    data-slot=\"tooltip-trigger\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </TooltipTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/tooltip/TooltipTrigger.vue"
+    },
+    {
+      "path": "src/components/ui/tooltip/TooltipContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { TooltipContentEmits, TooltipContentProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<TooltipContentProps & {\n    arrow?: boolean\n    class?: HTMLAttributes[\"class\"]\n  }>(),\n  {\n    arrow: true,\n    sideOffset: 4,\n  },\n)\n\nconst emits = defineEmits<TooltipContentEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"arrow\", \"class\")\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <TooltipPortal>\n    <TooltipContent\n      data-slot=\"tooltip-content\"\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"cn('bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance', props.class)\"\n    >\n      <slot />\n\n      <TooltipArrow\n        v-if=\"props.arrow\"\n        class=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\"\n      />\n    </TooltipContent>\n  </TooltipPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/tooltip/TooltipContent.vue"
+    },
+    {
+      "path": "src/components/ui/tooltip/TooltipProvider.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { TooltipProviderProps } from \"reka-ui\"\nimport { TooltipProvider } from \"reka-ui\"\n\nconst props = withDefaults(defineProps<TooltipProviderProps>(), {\n  delayDuration: 0,\n})\n</script>\n\n<template>\n  <TooltipProvider v-bind=\"props\">\n    <slot />\n  </TooltipProvider>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/tooltip/TooltipProvider.vue"
+    },
+    {
+      "path": "src/components/ui/tooltip/index.ts",
+      "content": "export { default as Tooltip } from \"./Tooltip.vue\"\nexport { default as TooltipContent } from \"./TooltipContent.vue\"\nexport { default as TooltipProvider } from \"./TooltipProvider.vue\"\nexport { default as TooltipTrigger } from \"./TooltipTrigger.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/tooltip/index.ts"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/data-table.json

@@ -0,0 +1,197 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "data-table",
+  "title": "Data Table",
+  "description": "A searchable, sortable, selectable, and paginated data table composed from table primitives.",
+  "dependencies": [
+    "@lucide/vue",
+    "@vueuse/core",
+    "class-variance-authority",
+    "clsx",
+    "reka-ui",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/data-table/DataTable.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { computed, ref, useSlots, watch } from \"vue\"\nimport {\n  ArrowDownIcon,\n  ArrowUpDownIcon,\n  ArrowUpIcon,\n  CheckIcon,\n  MinusIcon,\n  SearchIcon,\n} from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationItem,\n  PaginationLast,\n  PaginationNext,\n  PaginationPrevious,\n} from \"@/components/ui/pagination\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableEmpty,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\nimport { cn } from \"@/lib/utils\"\n\nexport type DataTableRow = Record<string, unknown>\nexport type DataTableRowKey = number | string\nexport type DataTableSortDirection = \"asc\" | \"desc\" | null\n\nexport interface DataTableColumn {\n  accessor?: (row: DataTableRow) => unknown\n  align?: \"center\" | \"left\" | \"right\"\n  cellClass?: HTMLAttributes[\"class\"]\n  class?: HTMLAttributes[\"class\"]\n  format?: (value: unknown, row: DataTableRow) => number | string\n  headerClass?: HTMLAttributes[\"class\"]\n  key: string\n  label: string\n  searchable?: boolean\n  sortable?: boolean\n}\n\nexport interface DataTableSortPayload {\n  direction: DataTableSortDirection\n  key: string\n}\n\nexport interface DataTableSelectionPayload {\n  keys: DataTableRowKey[]\n  rows: DataTableRow[]\n}\n\ninterface IndexedRow {\n  index: number\n  key: DataTableRowKey\n  row: DataTableRow\n}\n\nconst props = withDefaults(\n  defineProps<{\n    caption?: string\n    class?: HTMLAttributes[\"class\"]\n    columns?: DataTableColumn[]\n    containerClass?: HTMLAttributes[\"class\"]\n    emptyText?: string\n    loading?: boolean\n    loadingText?: string\n    modelValue?: DataTableRowKey[]\n    noResultsText?: string\n    page?: number\n    pageSize?: number\n    paginationClass?: HTMLAttributes[\"class\"]\n    rowKey?: ((row: DataTableRow, index: number) => DataTableRowKey) | string\n    rows?: DataTableRow[]\n    searchPlaceholder?: string\n    searchValue?: string\n    searchable?: boolean\n    selectable?: boolean\n    showPagination?: boolean\n    showRowCount?: boolean\n    sortDirection?: DataTableSortDirection\n    sortKey?: string\n    tableClass?: HTMLAttributes[\"class\"]\n    toolbarClass?: HTMLAttributes[\"class\"]\n  }>(),\n  {\n    columns: () => [],\n    emptyText: \"No rows found.\",\n    loading: false,\n    loadingText: \"Loading rows...\",\n    noResultsText: \"No results found.\",\n    page: undefined,\n    pageSize: 10,\n    rowKey: \"id\",\n    rows: () => [],\n    searchPlaceholder: \"Search rows\",\n    searchValue: undefined,\n    searchable: true,\n    selectable: false,\n    showPagination: true,\n    showRowCount: true,\n    sortDirection: null,\n    sortKey: \"\",\n  },\n)\n\nconst emit = defineEmits<{\n  \"select\": [payload: DataTableSelectionPayload]\n  \"sort\": [payload: DataTableSortPayload]\n  \"update:modelValue\": [keys: DataTableRowKey[]]\n  \"update:page\": [page: number]\n  \"update:searchValue\": [value: string]\n  \"update:sortDirection\": [direction: DataTableSortDirection]\n  \"update:sortKey\": [key: string]\n}>()\n\nconst slots = useSlots()\nconst internalPage = ref(1)\nconst internalSearchValue = ref(\"\")\nconst internalSelectedKeys = ref<DataTableRowKey[]>([])\nconst internalSortDirection = ref<DataTableSortDirection>(props.sortDirection)\nconst internalSortKey = ref(props.sortKey)\n\nconst pageSize = computed(() => Math.max(1, Math.trunc(props.pageSize)))\nconst columnCount = computed(() => props.columns.length + (props.selectable ? 1 : 0))\nconst hasToolbar = computed(() => props.searchable || Boolean(slots.toolbar))\nconst searchValue = computed({\n  get: () => props.searchValue ?? internalSearchValue.value,\n  set: (value: string) => {\n    internalSearchValue.value = value\n    emit(\"update:searchValue\", value)\n  },\n})\nconst currentPage = computed({\n  get: () => props.page ?? internalPage.value,\n  set: (value: number) => {\n    internalPage.value = value\n    emit(\"update:page\", value)\n  },\n})\nconst selectedKeys = computed({\n  get: () => props.modelValue ?? internalSelectedKeys.value,\n  set: (keys: DataTableRowKey[]) => {\n    internalSelectedKeys.value = keys\n    emit(\"update:modelValue\", keys)\n    emit(\"select\", {\n      keys,\n      rows: indexedRows.value\n        .filter((item) => keys.includes(item.key))\n        .map((item) => item.row),\n    })\n  },\n})\nconst activeSortKey = computed({\n  get: () => props.sortKey || internalSortKey.value,\n  set: (key: string) => {\n    internalSortKey.value = key\n    emit(\"update:sortKey\", key)\n  },\n})\nconst activeSortDirection = computed({\n  get: () => props.sortDirection ?? internalSortDirection.value,\n  set: (direction: DataTableSortDirection) => {\n    internalSortDirection.value = direction\n    emit(\"update:sortDirection\", direction)\n  },\n})\n\nconst indexedRows = computed<IndexedRow[]>(() =>\n  props.rows.map((row, index) => ({\n    index,\n    key: getRowKey(row, index),\n    row,\n  })),\n)\nconst filteredRows = computed(() => {\n  const query = normalizeSearchText(searchValue.value)\n\n  if (!query) return indexedRows.value\n\n  const searchableColumns = props.columns.filter((column) => column.searchable !== false)\n\n  return indexedRows.value.filter((item) =>\n    searchableColumns.some((column) =>\n      normalizeSearchText(String(getCellValue(item.row, column) ?? \"\")).includes(query),\n    ),\n  )\n})\nconst sortedRows = computed(() => {\n  if (!activeSortKey.value || !activeSortDirection.value) return filteredRows.value\n\n  const column = props.columns.find((item) => item.key === activeSortKey.value)\n\n  if (!column) return filteredRows.value\n\n  const direction = activeSortDirection.value === \"asc\" ? 1 : -1\n\n  return [...filteredRows.value].sort((first, second) =>\n    compareCellValues(\n      getCellValue(first.row, column),\n      getCellValue(second.row, column),\n    ) * direction,\n  )\n})\nconst pageCount = computed(() =>\n  Math.max(1, Math.ceil(sortedRows.value.length / pageSize.value)),\n)\nconst visibleRows = computed(() => {\n  if (!props.showPagination) return sortedRows.value\n\n  const start = (currentPage.value - 1) * pageSize.value\n\n  return sortedRows.value.slice(start, start + pageSize.value)\n})\nconst rowCountLabel = computed(() => {\n  if (sortedRows.value.length === 0) return \"0 rows\"\n\n  if (!props.showPagination) return `${sortedRows.value.length} rows`\n\n  const start = (currentPage.value - 1) * pageSize.value + 1\n  const end = Math.min(currentPage.value * pageSize.value, sortedRows.value.length)\n\n  return `${start}-${end} of ${sortedRows.value.length} rows`\n})\nconst hasRows = computed(() => visibleRows.value.length > 0)\nconst emptyStateText = computed(() =>\n  props.loading\n    ? props.loadingText\n    : searchValue.value\n      ? props.noResultsText\n      : props.emptyText,\n)\nconst headerSelectionState = computed(() => {\n  const keys = visibleRows.value.map((item) => item.key)\n\n  if (keys.length === 0) return false\n\n  const selectedCount = keys.filter((key) => selectedKeys.value.includes(key)).length\n\n  if (selectedCount === 0) return false\n  if (selectedCount === keys.length) return true\n\n  return \"indeterminate\"\n})\n\nwatch([pageSize, () => sortedRows.value.length], () => {\n  if (currentPage.value > pageCount.value) currentPage.value = pageCount.value\n  if (currentPage.value < 1) currentPage.value = 1\n})\n\nwatch(searchValue, () => {\n  currentPage.value = 1\n})\n\nfunction getRowKey(row: DataTableRow, index: number) {\n  if (typeof props.rowKey === \"function\") return props.rowKey(row, index)\n\n  const value = row[props.rowKey]\n\n  return typeof value === \"number\" || typeof value === \"string\" ? value : index\n}\n\nfunction getCellValue(row: DataTableRow, column: DataTableColumn) {\n  return column.accessor ? column.accessor(row) : row[column.key]\n}\n\nfunction getCellText(row: DataTableRow, column: DataTableColumn) {\n  const value = getCellValue(row, column)\n\n  if (column.format) return column.format(value, row)\n  if (value === null || value === undefined) return \"\"\n\n  return String(value)\n}\n\nfunction normalizeSearchText(value: string) {\n  return value.trim().toLowerCase().replace(/\\s+/g, \" \")\n}\n\nfunction compareCellValues(first: unknown, second: unknown) {\n  if (first === second) return 0\n  if (first === null || first === undefined) return 1\n  if (second === null || second === undefined) return -1\n\n  if (typeof first === \"number\" && typeof second === \"number\") {\n    return first - second\n  }\n\n  return String(first).localeCompare(String(second), undefined, {\n    numeric: true,\n    sensitivity: \"base\",\n  })\n}\n\nfunction isColumnSortable(column: DataTableColumn) {\n  return column.sortable !== false\n}\n\nfunction getSortIcon(column: DataTableColumn) {\n  if (activeSortKey.value !== column.key) return ArrowUpDownIcon\n  if (activeSortDirection.value === \"asc\") return ArrowUpIcon\n  if (activeSortDirection.value === \"desc\") return ArrowDownIcon\n\n  return ArrowUpDownIcon\n}\n\nfunction toggleSort(column: DataTableColumn) {\n  if (!isColumnSortable(column)) return\n\n  let nextDirection: DataTableSortDirection = \"asc\"\n\n  if (activeSortKey.value === column.key) {\n    nextDirection =\n      activeSortDirection.value === \"asc\"\n        ? \"desc\"\n        : activeSortDirection.value === \"desc\"\n          ? null\n          : \"asc\"\n  }\n\n  activeSortKey.value = nextDirection ? column.key : \"\"\n  activeSortDirection.value = nextDirection\n  emit(\"sort\", {\n    direction: nextDirection,\n    key: nextDirection ? column.key : \"\",\n  })\n}\n\nfunction alignClass(align?: DataTableColumn[\"align\"]) {\n  if (align === \"right\") return \"text-right\"\n  if (align === \"center\") return \"text-center\"\n\n  return \"text-left\"\n}\n\nfunction isRowSelected(key: DataTableRowKey) {\n  return selectedKeys.value.includes(key)\n}\n\nfunction toggleRowSelection(item: IndexedRow, value: boolean | \"indeterminate\") {\n  const keys = new Set(selectedKeys.value)\n\n  if (value === true) keys.add(item.key)\n  else keys.delete(item.key)\n\n  selectedKeys.value = Array.from(keys)\n}\n\nfunction toggleVisibleSelection(value: boolean | \"indeterminate\") {\n  const keys = new Set(selectedKeys.value)\n  const visibleKeys = visibleRows.value.map((item) => item.key)\n\n  if (value === true) {\n    visibleKeys.forEach((key) => keys.add(key))\n  } else {\n    visibleKeys.forEach((key) => keys.delete(key))\n  }\n\n  selectedKeys.value = Array.from(keys)\n}\n</script>\n\n<template>\n  <div data-slot=\"data-table\" :class=\"cn('flex min-w-0 flex-col gap-4', props.class)\">\n    <div\n      v-if=\"hasToolbar\"\n      data-slot=\"data-table-toolbar\"\n      :class=\"cn('flex flex-wrap items-center justify-between gap-3', props.toolbarClass)\"\n    >\n      <slot name=\"toolbar\">\n        <Input\n          v-if=\"props.searchable\"\n          v-model=\"searchValue\"\n          :icon=\"SearchIcon\"\n          class=\"w-full sm:w-72\"\n          :placeholder=\"props.searchPlaceholder\"\n        />\n      </slot>\n\n      <p\n        v-if=\"props.showRowCount\"\n        data-slot=\"data-table-row-count\"\n        class=\"shrink-0 text-sm text-muted-foreground\"\n      >\n        {{ rowCountLabel }}\n      </p>\n    </div>\n\n    <Table\n      :class=\"cn('min-w-[640px]', props.tableClass)\"\n      :container-class=\"cn('rounded-md border', props.containerClass)\"\n    >\n      <caption v-if=\"props.caption\" class=\"sr-only\">\n        {{ props.caption }}\n      </caption>\n\n      <TableHeader>\n        <TableRow>\n          <TableHead v-if=\"props.selectable\" class=\"w-10\">\n            <Checkbox\n              :model-value=\"headerSelectionState\"\n              aria-label=\"Select visible rows\"\n              @update:model-value=\"toggleVisibleSelection\"\n            >\n              <MinusIcon v-if=\"headerSelectionState === 'indeterminate'\" class=\"size-3.5\" />\n              <CheckIcon v-else class=\"size-3.5\" />\n            </Checkbox>\n          </TableHead>\n\n          <TableHead\n            v-for=\"column in props.columns\"\n            :key=\"column.key\"\n            :class=\"cn(alignClass(column.align), column.headerClass, column.class)\"\n          >\n            <Button\n              v-if=\"isColumnSortable(column)\"\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"sm\"\n              :aria-label=\"`Sort by ${column.label}`\"\n              :class=\"\n                cn(\n                  '-mx-2 h-8 px-2',\n                  column.align === 'right' && 'ml-auto',\n                  column.align === 'center' && 'mx-auto',\n                )\n              \"\n              @click=\"toggleSort(column)\"\n            >\n              <span class=\"truncate\">{{ column.label }}</span>\n              <component :is=\"getSortIcon(column)\" data-icon=\"inline-end\" />\n            </Button>\n\n            <span v-else class=\"truncate\">\n              {{ column.label }}\n            </span>\n          </TableHead>\n        </TableRow>\n      </TableHeader>\n\n      <TableBody>\n        <TableRow\n          v-for=\"item in visibleRows\"\n          :key=\"item.key\"\n          :data-state=\"isRowSelected(item.key) ? 'selected' : undefined\"\n        >\n          <TableCell v-if=\"props.selectable\" class=\"w-10\">\n            <Checkbox\n              :model-value=\"isRowSelected(item.key)\"\n              :aria-label=\"`Select row ${item.index + 1}`\"\n              @update:model-value=\"toggleRowSelection(item, $event)\"\n            />\n          </TableCell>\n\n          <TableCell\n            v-for=\"column in props.columns\"\n            :key=\"column.key\"\n            :class=\"cn(alignClass(column.align), column.cellClass, column.class)\"\n          >\n            <slot\n              :name=\"`cell-${column.key}`\"\n              :column=\"column\"\n              :index=\"item.index\"\n              :row=\"item.row\"\n              :value=\"getCellValue(item.row, column)\"\n            >\n              {{ getCellText(item.row, column) }}\n            </slot>\n          </TableCell>\n        </TableRow>\n\n        <TableEmpty v-if=\"!hasRows\" :colspan=\"Math.max(columnCount, 1)\">\n          <slot name=\"empty\" :search=\"searchValue\">\n            {{ emptyStateText }}\n          </slot>\n        </TableEmpty>\n      </TableBody>\n    </Table>\n\n    <div\n      v-if=\"props.showPagination && sortedRows.length > pageSize\"\n      data-slot=\"data-table-pagination\"\n      :class=\"cn('flex flex-wrap items-center justify-between gap-3', props.paginationClass)\"\n    >\n      <p\n        v-if=\"props.showRowCount && !hasToolbar\"\n        class=\"text-sm text-muted-foreground\"\n      >\n        {{ rowCountLabel }}\n      </p>\n\n      <Pagination\n        v-slot=\"{ page }\"\n        v-model:page=\"currentPage\"\n        :items-per-page=\"pageSize\"\n        :total=\"sortedRows.length\"\n        :sibling-count=\"1\"\n        show-edges\n        class=\"mx-0 justify-end\"\n      >\n        <PaginationContent v-slot=\"{ items }\">\n          <PaginationFirst size=\"sm\" />\n          <PaginationPrevious size=\"sm\" />\n          <template\n            v-for=\"(paginationItem, index) in items\"\n            :key=\"`${paginationItem.type}-${index}`\"\n          >\n            <PaginationItem\n              v-if=\"paginationItem.type === 'page'\"\n              :value=\"paginationItem.value\"\n              :is-active=\"paginationItem.value === page\"\n              size=\"icon-sm\"\n            >\n              {{ paginationItem.value }}\n            </PaginationItem>\n            <PaginationEllipsis v-else class=\"size-8\" />\n          </template>\n          <PaginationNext size=\"sm\" />\n          <PaginationLast size=\"sm\" />\n        </PaginationContent>\n      </Pagination>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/data-table/DataTable.vue"
+    },
+    {
+      "path": "src/components/ui/data-table/index.ts",
+      "content": "export { default as DataTable } from \"./DataTable.vue\"\nexport type {\n  DataTableColumn,\n  DataTableRow,\n  DataTableRowKey,\n  DataTableSelectionPayload,\n  DataTableSortDirection,\n  DataTableSortPayload,\n} from \"./DataTable.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/data-table/index.ts"
+    },
+    {
+      "path": "src/components/ui/button/Button.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { Primitive, type PrimitiveProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants, type ButtonVariants } from \"./variants\"\n\ninterface ButtonProps extends PrimitiveProps {\n  variant?: ButtonVariants[\"variant\"]\n  size?: ButtonVariants[\"size\"]\n  class?: HTMLAttributes[\"class\"]\n}\n\nconst props = withDefaults(defineProps<ButtonProps>(), {\n  as: \"button\",\n})\n</script>\n\n<template>\n  <Primitive\n    data-slot=\"button\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"cn(buttonVariants({ variant: props.variant, size: props.size }), props.class)\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/button/Button.vue"
+    },
+    {
+      "path": "src/components/ui/button/variants.ts",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nexport const buttonVariants = cva(\n  \"inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-[background-color,border-color,color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/30\",\n        outline:\n          \"border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n        ghost: \"hover:bg-accent hover:text-accent-foreground\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2\",\n        sm: \"h-8 rounded-md px-3 text-xs\",\n        lg: \"h-10 rounded-md px-6\",\n        icon: \"size-9\",\n        \"icon-sm\": \"size-8\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n",
+      "type": "registry:ui",
+      "target": "components/ui/button/variants.ts"
+    },
+    {
+      "path": "src/components/ui/button/index.ts",
+      "content": "export { default as Button } from \"./Button.vue\"\nexport { buttonVariants, type ButtonVariants } from \"./variants\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/button/index.ts"
+    },
+    {
+      "path": "src/components/ui/checkbox/Checkbox.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { CheckboxRootEmits, CheckboxRootProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { Check } from \"@lucide/vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<CheckboxRootProps & { class?: HTMLAttributes[\"class\"] }>()\nconst emits = defineEmits<CheckboxRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <CheckboxRoot\n    v-slot=\"slotProps\"\n    data-slot=\"checkbox\"\n    v-bind=\"forwarded\"\n    :class=\"\n      cn(\n        'peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <CheckboxIndicator\n      data-slot=\"checkbox-indicator\"\n      class=\"grid place-content-center text-current transition-none\"\n    >\n      <slot v-bind=\"slotProps\">\n        <Check class=\"size-3.5\" />\n      </slot>\n    </CheckboxIndicator>\n  </CheckboxRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/checkbox/Checkbox.vue"
+    },
+    {
+      "path": "src/components/ui/checkbox/index.ts",
+      "content": "export { default as Checkbox } from \"./Checkbox.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/checkbox/index.ts"
+    },
+    {
+      "path": "src/components/ui/input/Input.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, useAttrs, useId } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport InputControl from \"./InputControl.vue\"\nimport type { InputModelValue, InputProps } from \"./types\"\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<InputProps>(), {\n  iconPosition: \"start\",\n  type: \"text\",\n})\n\nconst emit = defineEmits<{\n  \"update:modelValue\": [value: InputModelValue]\n  input: [event: Event]\n  change: [event: Event]\n}>()\n\nconst attrs = useAttrs()\nconst generatedId = useId()\n\nconst controlId = computed(() => props.id ?? generatedId)\nconst hasMessage = computed(() => Boolean(props.message || props.error))\nconst hasError = computed(() => Boolean(props.error))\nconst shouldRenderField = computed(() =>\n  Boolean(\n    props.field\n      || props.fieldGroup\n      || props.label\n      || props.description\n      || hasMessage.value,\n  ),\n)\nconst descriptionId = computed(() =>\n  props.description ? `${controlId.value}-description` : undefined,\n)\nconst messageId = computed(() =>\n  hasMessage.value ? `${controlId.value}-message` : undefined,\n)\nconst describedBy = computed(() => {\n  const value = [\n    attrs[\"aria-describedby\"],\n    descriptionId.value,\n    messageId.value,\n  ].filter(Boolean).join(\" \")\n\n  return value || undefined\n})\nconst resolvedMessage = computed(() =>\n  typeof props.error === \"string\" ? props.error : props.message,\n)\n\nfunction handleUpdate(value: InputModelValue) {\n  emit(\"update:modelValue\", value)\n}\n</script>\n\n<template>\n  <InputControl\n    v-if=\"!shouldRenderField\"\n    v-bind=\"attrs\"\n    :id=\"controlId\"\n    :class=\"props.class\"\n    :default-value=\"props.defaultValue\"\n    :disabled=\"props.disabled\"\n    :icon=\"props.icon\"\n    :icon-class=\"props.iconClass\"\n    :icon-position=\"props.iconPosition\"\n    :input-class=\"props.inputClass\"\n    :invalid=\"props.invalid || hasError\"\n    :model-value=\"props.modelValue\"\n    :placeholder=\"props.placeholder\"\n    :readonly=\"props.readonly\"\n    :type=\"props.type\"\n    @change=\"emit('change', $event)\"\n    @input=\"emit('input', $event)\"\n    @update:model-value=\"handleUpdate\"\n  />\n\n  <div\n    v-else\n    :data-slot=\"props.fieldGroup ? 'input-field-group' : 'input-field'\"\n    :class=\"\n      cn(\n        props.fieldGroup ? 'grid gap-4' : 'grid gap-2',\n        props.groupClass,\n      )\n    \"\n  >\n    <div\n      data-slot=\"input-field\"\n      :data-disabled=\"props.disabled ? '' : undefined\"\n      :data-invalid=\"hasError ? '' : undefined\"\n      :class=\"cn('grid gap-2', props.fieldClass)\"\n    >\n      <label\n        v-if=\"props.label\"\n        data-slot=\"input-label\"\n        :for=\"controlId\"\n        :class=\"\n          cn(\n            'text-sm font-medium leading-none text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70 data-[disabled=true]:opacity-50',\n            props.labelClass,\n          )\n        \"\n      >\n        {{ props.label }}\n      </label>\n\n      <InputControl\n        v-bind=\"attrs\"\n        :id=\"controlId\"\n        :aria-describedby=\"describedBy\"\n        :class=\"props.class\"\n        :default-value=\"props.defaultValue\"\n        :disabled=\"props.disabled\"\n        :icon=\"props.icon\"\n        :icon-class=\"props.iconClass\"\n        :icon-position=\"props.iconPosition\"\n        :input-class=\"props.inputClass\"\n        :invalid=\"props.invalid || hasError\"\n        :model-value=\"props.modelValue\"\n        :placeholder=\"props.placeholder\"\n        :readonly=\"props.readonly\"\n        :type=\"props.type\"\n        @change=\"emit('change', $event)\"\n        @input=\"emit('input', $event)\"\n        @update:model-value=\"handleUpdate\"\n      />\n\n      <p\n        v-if=\"props.description\"\n        :id=\"descriptionId\"\n        data-slot=\"input-description\"\n        :class=\"cn('text-xs leading-relaxed text-muted-foreground', props.descriptionClass)\"\n      >\n        {{ props.description }}\n      </p>\n\n      <p\n        v-if=\"resolvedMessage\"\n        :id=\"messageId\"\n        data-slot=\"input-message\"\n        :class=\"\n          cn(\n            'text-xs font-medium leading-relaxed',\n            hasError ? 'text-destructive' : 'text-muted-foreground',\n            props.messageClass,\n          )\n        \"\n      >\n        {{ resolvedMessage }}\n      </p>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/input/Input.vue"
+    },
+    {
+      "path": "src/components/ui/input/InputControl.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed, useAttrs } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport type { InputControlProps, InputModelValue } from \"./types\"\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<InputControlProps>(), {\n  iconPosition: \"start\",\n  type: \"text\",\n})\n\nconst emit = defineEmits<{\n  \"update:modelValue\": [value: InputModelValue]\n  input: [event: Event]\n  change: [event: Event]\n}>()\n\nconst attrs = useAttrs()\n\nconst isFileInput = computed(() => props.type === \"file\")\nconst hasIcon = computed(() => Boolean(props.icon))\nconst inputValue = computed(() => {\n  if (isFileInput.value) return undefined\n\n  return props.modelValue ?? props.defaultValue ?? \"\"\n})\nconst valueBinding = computed(() =>\n  isFileInput.value ? {} : { value: inputValue.value },\n)\nconst controlAttrs = computed(() => ({\n  ...attrs,\n  ...valueBinding.value,\n}))\n\nconst inputClasses = computed(() =>\n  cn(\n    \"border-input bg-background text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none file:mr-3 file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20\",\n    isFileInput.value && \"cursor-pointer\",\n    hasIcon.value\n      && \"border-0 bg-transparent px-0 shadow-none focus-visible:border-transparent focus-visible:ring-0\",\n    props.inputClass,\n    !hasIcon.value && props.class,\n  ),\n)\n\nconst wrapperClasses = computed(() =>\n  cn(\n    \"border-input bg-background text-foreground focus-within:border-ring focus-within:ring-ring/50 flex h-9 w-full min-w-0 items-center gap-2 rounded-md border px-3 shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-disabled:cursor-not-allowed has-disabled:opacity-50 has-aria-invalid:border-destructive has-aria-invalid:ring-destructive/20\",\n    props.class,\n  ),\n)\n\nfunction getInputModelValue(target: HTMLInputElement) {\n  if (isFileInput.value) return target.files\n  if (props.type === \"number\") return target.value === \"\" ? \"\" : target.valueAsNumber\n\n  return target.value\n}\n\nfunction handleInput(event: Event) {\n  const target = event.target as HTMLInputElement\n\n  if (!isFileInput.value) {\n    emit(\"update:modelValue\", getInputModelValue(target))\n  }\n\n  emit(\"input\", event)\n}\n\nfunction handleChange(event: Event) {\n  const target = event.target as HTMLInputElement\n\n  if (isFileInput.value) {\n    emit(\"update:modelValue\", getInputModelValue(target))\n  }\n\n  emit(\"change\", event)\n}\n</script>\n\n<template>\n  <div\n    v-if=\"hasIcon\"\n    data-slot=\"input-wrapper\"\n    :class=\"wrapperClasses\"\n  >\n    <component\n      :is=\"props.icon\"\n      v-if=\"props.iconPosition === 'start'\"\n      aria-hidden=\"true\"\n      data-slot=\"input-icon\"\n      :class=\"cn('size-4 shrink-0 text-muted-foreground', props.iconClass)\"\n    />\n\n    <input\n      v-bind=\"controlAttrs\"\n      :id=\"props.id\"\n      data-slot=\"input\"\n      :aria-invalid=\"props.invalid ? true : undefined\"\n      :class=\"inputClasses\"\n      :disabled=\"props.disabled\"\n      :placeholder=\"props.placeholder\"\n      :readonly=\"props.readonly\"\n      :type=\"props.type\"\n      @change=\"handleChange\"\n      @input=\"handleInput\"\n    >\n\n    <component\n      :is=\"props.icon\"\n      v-if=\"props.iconPosition === 'end'\"\n      aria-hidden=\"true\"\n      data-slot=\"input-icon\"\n      :class=\"cn('size-4 shrink-0 text-muted-foreground', props.iconClass)\"\n    />\n  </div>\n\n  <input\n    v-else\n    v-bind=\"controlAttrs\"\n    :id=\"props.id\"\n    data-slot=\"input\"\n    :aria-invalid=\"props.invalid ? true : undefined\"\n    :class=\"inputClasses\"\n    :disabled=\"props.disabled\"\n    :placeholder=\"props.placeholder\"\n    :readonly=\"props.readonly\"\n    :type=\"props.type\"\n    @change=\"handleChange\"\n    @input=\"handleInput\"\n  >\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/input/InputControl.vue"
+    },
+    {
+      "path": "src/components/ui/input/InputFieldGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <div data-slot=\"input-field-group\" :class=\"cn('grid gap-4', props.class)\">\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/input/InputFieldGroup.vue"
+    },
+    {
+      "path": "src/components/ui/input/types.ts",
+      "content": "import type { Component, HTMLAttributes, InputHTMLAttributes } from \"vue\"\n\nexport type InputModelValue = string | number | FileList | null\nexport type InputIconPosition = \"start\" | \"end\"\n\nexport interface InputControlProps {\n  class?: HTMLAttributes[\"class\"]\n  defaultValue?: string | number\n  disabled?: boolean\n  icon?: Component\n  iconClass?: HTMLAttributes[\"class\"]\n  iconPosition?: InputIconPosition\n  id?: string\n  inputClass?: HTMLAttributes[\"class\"]\n  invalid?: boolean\n  modelValue?: InputModelValue\n  placeholder?: string\n  readonly?: boolean\n  type?: InputHTMLAttributes[\"type\"]\n}\n\nexport interface InputProps extends InputControlProps {\n  description?: string\n  descriptionClass?: HTMLAttributes[\"class\"]\n  error?: string | boolean\n  field?: boolean\n  fieldClass?: HTMLAttributes[\"class\"]\n  fieldGroup?: boolean\n  groupClass?: HTMLAttributes[\"class\"]\n  label?: string\n  labelClass?: HTMLAttributes[\"class\"]\n  message?: string\n  messageClass?: HTMLAttributes[\"class\"]\n}\n",
+      "type": "registry:ui",
+      "target": "components/ui/input/types.ts"
+    },
+    {
+      "path": "src/components/ui/input/index.ts",
+      "content": "export { default as Input } from \"./Input.vue\"\nexport { default as InputControl } from \"./InputControl.vue\"\nexport { default as InputFieldGroup } from \"./InputFieldGroup.vue\"\nexport type {\n  InputControlProps,\n  InputIconPosition,\n  InputModelValue,\n  InputProps,\n} from \"./types\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/input/index.ts"
+    },
+    {
+      "path": "src/components/ui/pagination/Pagination.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PaginationRootEmits, PaginationRootProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { PaginationRoot, useForwardPropsEmits } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<PaginationRootProps & {\n  class?: HTMLAttributes[\"class\"]\n}>()\nconst emits = defineEmits<PaginationRootEmits>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <PaginationRoot\n    v-slot=\"slotProps\"\n    data-slot=\"pagination\"\n    v-bind=\"forwarded\"\n    :class=\"cn('mx-auto flex w-full justify-center', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </PaginationRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/pagination/Pagination.vue"
+    },
+    {
+      "path": "src/components/ui/pagination/PaginationContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PaginationListProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { PaginationList } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<PaginationListProps & {\n  class?: HTMLAttributes[\"class\"]\n}>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n</script>\n\n<template>\n  <PaginationList\n    v-slot=\"slotProps\"\n    data-slot=\"pagination-content\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('flex flex-row items-center gap-1', props.class)\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </PaginationList>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/pagination/PaginationContent.vue"
+    },
+    {
+      "path": "src/components/ui/pagination/PaginationEllipsis.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PaginationEllipsisProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { MoreHorizontalIcon } from \"@lucide/vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { PaginationEllipsis } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<PaginationEllipsisProps & {\n  class?: HTMLAttributes[\"class\"]\n}>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n</script>\n\n<template>\n  <PaginationEllipsis\n    data-slot=\"pagination-ellipsis\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('flex size-9 items-center justify-center', props.class)\"\n  >\n    <slot>\n      <MoreHorizontalIcon class=\"size-4\" />\n      <span class=\"sr-only\">More pages</span>\n    </slot>\n  </PaginationEllipsis>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/pagination/PaginationEllipsis.vue"
+    },
+    {
+      "path": "src/components/ui/pagination/PaginationFirst.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PaginationFirstProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport type { ButtonVariants } from \"@/components/ui/button\"\nimport { ChevronsLeftIcon } from \"@lucide/vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { PaginationFirst, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst props = withDefaults(defineProps<PaginationFirstProps & {\n  class?: HTMLAttributes[\"class\"]\n  size?: ButtonVariants[\"size\"]\n}>(), {\n  size: \"default\",\n})\n\nconst delegatedProps = reactiveOmit(props, \"class\", \"size\")\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PaginationFirst\n    data-slot=\"pagination-first\"\n    v-bind=\"forwarded\"\n    :class=\"cn(buttonVariants({ variant: 'ghost', size: props.size }), 'gap-1 px-2.5', props.class)\"\n  >\n    <slot>\n      <ChevronsLeftIcon />\n      <span class=\"hidden sm:block\">First</span>\n    </slot>\n  </PaginationFirst>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/pagination/PaginationFirst.vue"
+    },
+    {
+      "path": "src/components/ui/pagination/PaginationItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PaginationListItemProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport type { ButtonVariants } from \"@/components/ui/button\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { PaginationListItem } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst props = withDefaults(defineProps<PaginationListItemProps & {\n  class?: HTMLAttributes[\"class\"]\n  isActive?: boolean\n  size?: ButtonVariants[\"size\"]\n}>(), {\n  isActive: false,\n  size: \"icon\",\n})\n\nconst delegatedProps = reactiveOmit(props, \"class\", \"isActive\", \"size\")\n</script>\n\n<template>\n  <PaginationListItem\n    data-slot=\"pagination-item\"\n    v-bind=\"delegatedProps\"\n    :class=\"\n      cn(\n        buttonVariants({\n          variant: props.isActive ? 'outline' : 'ghost',\n          size: props.size,\n        }),\n        !props.isActive && 'data-[selected=true]:border data-[selected=true]:border-input data-[selected=true]:bg-background data-[selected=true]:shadow-xs',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </PaginationListItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/pagination/PaginationItem.vue"
+    },
+    {
+      "path": "src/components/ui/pagination/PaginationLast.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PaginationLastProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport type { ButtonVariants } from \"@/components/ui/button\"\nimport { ChevronsRightIcon } from \"@lucide/vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { PaginationLast, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst props = withDefaults(defineProps<PaginationLastProps & {\n  class?: HTMLAttributes[\"class\"]\n  size?: ButtonVariants[\"size\"]\n}>(), {\n  size: \"default\",\n})\n\nconst delegatedProps = reactiveOmit(props, \"class\", \"size\")\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PaginationLast\n    data-slot=\"pagination-last\"\n    v-bind=\"forwarded\"\n    :class=\"cn(buttonVariants({ variant: 'ghost', size: props.size }), 'gap-1 px-2.5', props.class)\"\n  >\n    <slot>\n      <span class=\"hidden sm:block\">Last</span>\n      <ChevronsRightIcon />\n    </slot>\n  </PaginationLast>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/pagination/PaginationLast.vue"
+    },
+    {
+      "path": "src/components/ui/pagination/PaginationNext.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PaginationNextProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport type { ButtonVariants } from \"@/components/ui/button\"\nimport { ChevronRightIcon } from \"@lucide/vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { PaginationNext, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst props = withDefaults(defineProps<PaginationNextProps & {\n  class?: HTMLAttributes[\"class\"]\n  size?: ButtonVariants[\"size\"]\n}>(), {\n  size: \"default\",\n})\n\nconst delegatedProps = reactiveOmit(props, \"class\", \"size\")\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PaginationNext\n    data-slot=\"pagination-next\"\n    v-bind=\"forwarded\"\n    :class=\"cn(buttonVariants({ variant: 'ghost', size: props.size }), 'gap-1 px-2.5', props.class)\"\n  >\n    <slot>\n      <span class=\"hidden sm:block\">Next</span>\n      <ChevronRightIcon />\n    </slot>\n  </PaginationNext>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/pagination/PaginationNext.vue"
+    },
+    {
+      "path": "src/components/ui/pagination/PaginationPrevious.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PaginationPrevProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport type { ButtonVariants } from \"@/components/ui/button\"\nimport { ChevronLeftIcon } from \"@lucide/vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { PaginationPrev, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport { buttonVariants } from \"@/components/ui/button\"\n\nconst props = withDefaults(defineProps<PaginationPrevProps & {\n  class?: HTMLAttributes[\"class\"]\n  size?: ButtonVariants[\"size\"]\n}>(), {\n  size: \"default\",\n})\n\nconst delegatedProps = reactiveOmit(props, \"class\", \"size\")\nconst forwarded = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <PaginationPrev\n    data-slot=\"pagination-previous\"\n    v-bind=\"forwarded\"\n    :class=\"cn(buttonVariants({ variant: 'ghost', size: props.size }), 'gap-1 px-2.5', props.class)\"\n  >\n    <slot>\n      <ChevronLeftIcon />\n      <span class=\"hidden sm:block\">Previous</span>\n    </slot>\n  </PaginationPrev>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/pagination/PaginationPrevious.vue"
+    },
+    {
+      "path": "src/components/ui/pagination/index.ts",
+      "content": "export { default as Pagination } from \"./Pagination.vue\"\nexport { default as PaginationContent } from \"./PaginationContent.vue\"\nexport { default as PaginationEllipsis } from \"./PaginationEllipsis.vue\"\nexport { default as PaginationFirst } from \"./PaginationFirst.vue\"\nexport { default as PaginationItem } from \"./PaginationItem.vue\"\nexport { default as PaginationLast } from \"./PaginationLast.vue\"\nexport { default as PaginationNext } from \"./PaginationNext.vue\"\nexport { default as PaginationPrevious } from \"./PaginationPrevious.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/pagination/index.ts"
+    },
+    {
+      "path": "src/components/ui/table/Table.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n  containerClass?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <div\n    data-slot=\"table-container\"\n    :class=\"cn('relative w-full min-w-0 overflow-auto', props.containerClass)\"\n  >\n    <table\n      data-slot=\"table\"\n      :class=\"cn('w-full caption-bottom text-sm', props.class)\"\n    >\n      <slot />\n    </table>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/Table.vue"
+    },
+    {
+      "path": "src/components/ui/table/TableBody.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <tbody\n    data-slot=\"table-body\"\n    :class=\"cn('[&_tr:last-child]:border-0', props.class)\"\n  >\n    <slot />\n  </tbody>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/TableBody.vue"
+    },
+    {
+      "path": "src/components/ui/table/TableCell.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n  colspan?: number | string\n}>()\n</script>\n\n<template>\n  <td\n    data-slot=\"table-cell\"\n    :colspan=\"props.colspan\"\n    :class=\"\n      cn(\n        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </td>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/TableCell.vue"
+    },
+    {
+      "path": "src/components/ui/table/TableEmpty.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport TableCell from \"./TableCell.vue\"\nimport TableRow from \"./TableRow.vue\"\n\nconst props = withDefaults(defineProps<{\n  class?: HTMLAttributes[\"class\"]\n  colspan?: number | string\n}>(), {\n  colspan: 1,\n})\n</script>\n\n<template>\n  <TableRow>\n    <TableCell\n      :colspan=\"props.colspan\"\n      :class=\"\n        cn(\n          'p-4 text-sm text-foreground',\n          props.class,\n        )\n      \"\n    >\n      <div class=\"flex items-center justify-center py-10\">\n        <slot />\n      </div>\n    </TableCell>\n  </TableRow>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/TableEmpty.vue"
+    },
+    {
+      "path": "src/components/ui/table/TableHead.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <th\n    data-slot=\"table-head\"\n    :class=\"\n      cn(\n        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </th>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/TableHead.vue"
+    },
+    {
+      "path": "src/components/ui/table/TableHeader.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <thead\n    data-slot=\"table-header\"\n    :class=\"cn('[&_tr]:border-b', props.class)\"\n  >\n    <slot />\n  </thead>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/TableHeader.vue"
+    },
+    {
+      "path": "src/components/ui/table/TableRow.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <tr\n    data-slot=\"table-row\"\n    :class=\"\n      cn(\n        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </tr>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/TableRow.vue"
+    },
+    {
+      "path": "src/components/ui/table/index.ts",
+      "content": "export { default as Table } from \"./Table.vue\"\nexport { default as TableBody } from \"./TableBody.vue\"\nexport { default as TableCaption } from \"./TableCaption.vue\"\nexport { default as TableCell } from \"./TableCell.vue\"\nexport { default as TableEmpty } from \"./TableEmpty.vue\"\nexport { default as TableFooter } from \"./TableFooter.vue\"\nexport { default as TableHead } from \"./TableHead.vue\"\nexport { default as TableHeader } from \"./TableHeader.vue\"\nexport { default as TableRow } from \"./TableRow.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/table/index.ts"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "type": "registry:ui"
+}

package/public/r/date-picker.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "date-picker",
+  "title": "Date Picker",
+  "description": "A date picker control that can switch between single date, range, and time picker modes with props.",
+  "dependencies": [
+    "@lucide/vue",
+    "clsx",
+    "reka-ui",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/date-picker/DatePicker.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { computed, ref, watch } from \"vue\"\nimport {\n  CalendarIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n  ClockIcon,\n} from \"@lucide/vue\"\nimport {\n  PopoverContent,\n  PopoverPortal,\n  PopoverRoot,\n  PopoverTrigger,\n} from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nexport type DatePickerMode = \"single\" | \"range\" | \"time\"\n\nexport interface DatePickerSingleObjectValue {\n  date?: string\n}\n\nexport interface DatePickerRangeObjectValue {\n  start?: string\n  end?: string\n}\n\nexport type DatePickerValue =\n  | string\n  | DatePickerSingleObjectValue\n  | DatePickerRangeObjectValue\n  | null\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<{\n    class?: HTMLAttributes[\"class\"]\n    contentClass?: HTMLAttributes[\"class\"]\n    disabled?: boolean\n    max?: string\n    min?: string\n    mode?: DatePickerMode\n    modelValue?: DatePickerValue\n    placeholder?: string\n    range?: boolean\n    timePlaceholder?: string\n  }>(),\n  {\n    mode: \"single\",\n    placeholder: \"Pick a date\",\n    range: false,\n    timePlaceholder: \"Pick time\",\n  },\n)\n\nconst emit = defineEmits<{\n  \"update:modelValue\": [value: DatePickerValue]\n  change: [value: DatePickerValue]\n}>()\n\nconst open = ref(false)\nconst dateValue = ref(\"\")\nconst startValue = ref(\"\")\nconst endValue = ref(\"\")\nconst hoveredDate = ref(\"\")\nconst timeHour = ref(\"\")\nconst timeMinute = ref(\"\")\nconst timeMinuteInput = ref<HTMLInputElement | null>(null)\nconst visibleMonth = ref(getMonthDate(new Date()))\n\nconst isRange = computed(() => props.range || props.mode === \"range\")\nconst isTimeOnly = computed(() => props.mode === \"time\")\n\nconst weekDays = [\"Su\", \"Mo\", \"Tu\", \"We\", \"Th\", \"Fr\", \"Sa\"]\n\nconst calendarTitle = computed(() =>\n  new Intl.DateTimeFormat(undefined, {\n    month: \"long\",\n    year: \"numeric\",\n  }).format(visibleMonth.value),\n)\n\nconst calendarDays = computed(() => {\n  const year = visibleMonth.value.getFullYear()\n  const month = visibleMonth.value.getMonth()\n  const firstDay = new Date(year, month, 1)\n  const gridStart = new Date(year, month, 1 - firstDay.getDay())\n  const rangeBounds = getActiveRangeBounds()\n  const today = formatLocalDate(new Date())\n\n  return Array.from({ length: 42 }, (_, index) => {\n    const day = new Date(\n      gridStart.getFullYear(),\n      gridStart.getMonth(),\n      gridStart.getDate() + index,\n    )\n    const value = formatLocalDate(day)\n    const selected = isDateSelected(value)\n    const rangeActive = selected || isDateInRange(value) || isDateInPreviewRange(value)\n\n    return {\n      currentMonth: day.getMonth() === month,\n      date: value,\n      day: day.getDate(),\n      disabled: isDateDisabled(value),\n      rangeActive,\n      rangeEnd: rangeActive && rangeBounds?.end === value,\n      rangeStart: rangeActive && rangeBounds?.start === value,\n      selected,\n      today: value === today,\n    }\n  })\n})\n\nconst displayValue = computed(() => {\n  if (isRange.value) {\n    const rangeLabel = [\n      formatDateLabel(startValue.value),\n      formatDateLabel(endValue.value),\n    ].filter(Boolean).join(\" - \")\n\n    return rangeLabel\n  }\n\n  return formatDateLabel(dateValue.value)\n})\n\nconst hasDisplayValue = computed(() => displayValue.value.length > 0)\n\nfunction extractDatePart(value: string) {\n  const match = value.match(/\\d{4}-\\d{2}-\\d{2}/)\n\n  return match?.[0] ?? \"\"\n}\n\nfunction extractTimePart(value: string) {\n  const match = value.match(/(?:T|\\s)?(\\d{2}:\\d{2})/)\n\n  return match?.[1] ?? \"\"\n}\n\nfunction formatLocalDate(date: Date) {\n  const year = date.getFullYear()\n  const month = String(date.getMonth() + 1).padStart(2, \"0\")\n  const day = String(date.getDate()).padStart(2, \"0\")\n\n  return `${year}-${month}-${day}`\n}\n\nfunction parseLocalDate(value: string) {\n  const [year, month, day] = value.split(\"-\").map(Number)\n\n  if (!year || !month || !day) return null\n\n  return new Date(year, month - 1, day)\n}\n\nfunction getMonthDate(date: Date) {\n  return new Date(date.getFullYear(), date.getMonth(), 1)\n}\n\nfunction getTimeParts(value: string) {\n  const [hour = \"\", minute = \"\"] = value.split(\":\")\n\n  return {\n    hour,\n    minute,\n  }\n}\n\nfunction sanitizeTimeInput(value: string) {\n  return value.replace(/\\D/g, \"\").slice(0, 2)\n}\n\nfunction normalizeTimeInput(value: string, max: number) {\n  if (!value) return \"\"\n\n  const number = Number(value)\n\n  if (Number.isNaN(number)) return \"\"\n\n  return String(Math.min(number, max)).padStart(2, \"0\")\n}\n\nfunction getCompleteTimeValue() {\n  if (!timeHour.value || !timeMinute.value) return \"\"\n\n  const hour = normalizeTimeInput(timeHour.value, 23)\n  const minute = normalizeTimeInput(timeMinute.value, 59)\n\n  if (!hour || !minute) return \"\"\n\n  return `${hour}:${minute}`\n}\n\nfunction setTimeModelValue(value: string | null) {\n  emit(\"update:modelValue\", value)\n  emit(\"change\", value)\n}\n\nfunction emitCompleteTimeValue() {\n  const value = getCompleteTimeValue()\n\n  if (!value || timeHour.value.length < 2 || timeMinute.value.length < 2) return\n\n  const [hour, minute] = value.split(\":\")\n\n  timeHour.value = hour\n  timeMinute.value = minute\n  setTimeModelValue(value)\n}\n\nfunction handleTimeInput(part: \"hour\" | \"minute\", event: Event) {\n  if (props.disabled) return\n\n  const value = sanitizeTimeInput((event.target as HTMLInputElement).value)\n\n  if (part === \"hour\") {\n    timeHour.value = value\n\n    if (value.length === 2) {\n      timeMinuteInput.value?.focus()\n    }\n  } else {\n    timeMinute.value = value\n  }\n\n  emitCompleteTimeValue()\n}\n\nfunction commitTimeInput(part: \"hour\" | \"minute\") {\n  if (props.disabled) return\n\n  if (part === \"hour\") {\n    timeHour.value = normalizeTimeInput(timeHour.value, 23)\n  } else {\n    timeMinute.value = normalizeTimeInput(timeMinute.value, 59)\n  }\n\n  const value = getCompleteTimeValue()\n\n  if (value) {\n    const [hour, minute] = value.split(\":\")\n\n    timeHour.value = hour\n    timeMinute.value = minute\n    setTimeModelValue(value)\n    return\n  }\n\n  if (!timeHour.value && !timeMinute.value) {\n    setTimeModelValue(null)\n  }\n}\n\nfunction selectInputText(event: FocusEvent) {\n  const input = event.target as HTMLInputElement\n\n  input.select()\n}\n\nfunction formatDateLabel(value: string) {\n  if (!value) return \"\"\n\n  const [year, month, day] = value.split(\"-\").map(Number)\n\n  if (!year || !month || !day) return value\n\n  return new Intl.DateTimeFormat(undefined, {\n    day: \"numeric\",\n    month: \"short\",\n    year: \"numeric\",\n  }).format(new Date(year, month - 1, day))\n}\n\nfunction setVisibleMonthFromValue(value: string) {\n  const date = parseLocalDate(value)\n\n  if (!date) return\n\n  visibleMonth.value = getMonthDate(date)\n}\n\nfunction isDateDisabled(value: string) {\n  return Boolean(\n    (props.min && value < props.min)\n    || (props.max && value > props.max),\n  )\n}\n\nfunction isDateSelected(value: string) {\n  if (isRange.value) {\n    return value === startValue.value || value === endValue.value\n  }\n\n  return value === dateValue.value\n}\n\nfunction isDateInRange(value: string) {\n  if (!isRange.value || !startValue.value || !endValue.value) return false\n\n  return value > startValue.value && value < endValue.value\n}\n\nfunction isDateInPreviewRange(value: string) {\n  if (\n    !isRange.value\n    || !startValue.value\n    || endValue.value\n    || !hoveredDate.value\n  ) {\n    return false\n  }\n\n  const start = startValue.value < hoveredDate.value\n    ? startValue.value\n    : hoveredDate.value\n  const end = startValue.value < hoveredDate.value\n    ? hoveredDate.value\n    : startValue.value\n\n  return value >= start && value <= end\n}\n\nfunction getActiveRangeBounds() {\n  if (!isRange.value || !startValue.value) return null\n\n  const boundary = endValue.value || hoveredDate.value || startValue.value\n\n  return startValue.value <= boundary\n    ? { start: startValue.value, end: boundary }\n    : { start: boundary, end: startValue.value }\n}\n\nfunction moveMonth(months: number) {\n  visibleMonth.value = new Date(\n    visibleMonth.value.getFullYear(),\n    visibleMonth.value.getMonth() + months,\n    1,\n  )\n}\n\nfunction selectCalendarDate(value: string) {\n  if (props.disabled || isDateDisabled(value)) return\n\n  let shouldClose = false\n  hoveredDate.value = \"\"\n\n  if (isRange.value) {\n    if (!startValue.value || endValue.value) {\n      startValue.value = value\n      endValue.value = \"\"\n    } else if (value < startValue.value) {\n      endValue.value = startValue.value\n      startValue.value = value\n      shouldClose = true\n    } else {\n      endValue.value = value\n      shouldClose = true\n    }\n  } else {\n    dateValue.value = value\n    shouldClose = true\n  }\n\n  setVisibleMonthFromValue(value)\n  emitValue()\n\n  if (shouldClose) {\n    open.value = false\n  }\n}\n\nfunction setRangeHoveredDate(value: string) {\n  if (\n    !isRange.value\n    || !startValue.value\n    || endValue.value\n    || isDateDisabled(value)\n  ) {\n    return\n  }\n\n  hoveredDate.value = value\n}\n\nfunction clearRangeHoveredDate() {\n  hoveredDate.value = \"\"\n}\n\nfunction syncFromModelValue(value: DatePickerValue | undefined) {\n  dateValue.value = \"\"\n  startValue.value = \"\"\n  endValue.value = \"\"\n  hoveredDate.value = \"\"\n  timeHour.value = \"\"\n  timeMinute.value = \"\"\n\n  if (!value) return\n\n  if (typeof value === \"string\") {\n    if (isTimeOnly.value) {\n      const timeParts = getTimeParts(extractTimePart(value))\n\n      timeHour.value = timeParts.hour\n      timeMinute.value = timeParts.minute\n      return\n    }\n\n    if (isRange.value) {\n      startValue.value = extractDatePart(value)\n      return\n    }\n\n    dateValue.value = extractDatePart(value)\n    if (dateValue.value) setVisibleMonthFromValue(dateValue.value)\n    return\n  }\n\n  if (isRange.value) {\n    const rangeValue = value as DatePickerRangeObjectValue\n\n    startValue.value = rangeValue.start ? extractDatePart(rangeValue.start) : \"\"\n    endValue.value = rangeValue.end ? extractDatePart(rangeValue.end) : \"\"\n    if (startValue.value || endValue.value) {\n      setVisibleMonthFromValue(startValue.value || endValue.value)\n    }\n    return\n  }\n\n  const singleValue = value as DatePickerSingleObjectValue\n\n  dateValue.value = singleValue.date ? extractDatePart(singleValue.date) : \"\"\n  if (dateValue.value) setVisibleMonthFromValue(dateValue.value)\n}\n\nfunction createModelValue(): DatePickerValue {\n  if (isTimeOnly.value) return getCompleteTimeValue() || null\n\n  if (isRange.value) {\n    const next: DatePickerRangeObjectValue = {}\n\n    if (startValue.value) next.start = startValue.value\n    if (endValue.value) next.end = endValue.value\n\n    return Object.keys(next).length ? next : null\n  }\n\n  return dateValue.value || null\n}\n\nfunction emitValue() {\n  const value = createModelValue()\n\n  emit(\"update:modelValue\", value)\n  emit(\"change\", value)\n}\n\nwatch(\n  () => [props.modelValue, props.mode, props.range] as const,\n  ([value]) => syncFromModelValue(value),\n  { deep: true, immediate: true },\n)\n</script>\n\n<template>\n  <div\n    v-if=\"isTimeOnly\"\n    v-bind=\"$attrs\"\n    data-slot=\"date-picker-time-field\"\n    role=\"group\"\n    :aria-disabled=\"props.disabled ? 'true' : undefined\"\n    :aria-label=\"props.timePlaceholder\"\n    :class=\"\n      cn(\n        'border-input bg-background text-foreground focus-within:border-ring focus-within:ring-ring/50 flex h-9 w-full items-center gap-2 rounded-md border px-3 py-1 shadow-xs transition-[color,box-shadow] focus-within:ring-[3px]',\n        props.disabled && 'cursor-not-allowed opacity-50',\n        props.class,\n      )\n    \"\n  >\n    <ClockIcon aria-hidden=\"true\" class=\"size-4 shrink-0 text-muted-foreground\" />\n\n    <input\n      data-slot=\"date-picker-hour-input\"\n      :value=\"timeHour\"\n      :disabled=\"props.disabled\"\n      aria-label=\"Hour\"\n      autocomplete=\"off\"\n      class=\"h-7 w-8 bg-transparent text-center text-sm font-medium tabular-nums outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      pattern=\"[0-9]*\"\n      placeholder=\"HH\"\n      type=\"text\"\n      @blur=\"commitTimeInput('hour')\"\n      @focus=\"selectInputText\"\n      @input=\"handleTimeInput('hour', $event)\"\n    />\n\n    <span aria-hidden=\"true\" class=\"text-sm font-medium text-muted-foreground\">\n      :\n    </span>\n\n    <input\n      ref=\"timeMinuteInput\"\n      data-slot=\"date-picker-minute-input\"\n      :value=\"timeMinute\"\n      :disabled=\"props.disabled\"\n      aria-label=\"Minute\"\n      autocomplete=\"off\"\n      class=\"h-7 w-8 bg-transparent text-center text-sm font-medium tabular-nums outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed\"\n      inputmode=\"numeric\"\n      maxlength=\"2\"\n      pattern=\"[0-9]*\"\n      placeholder=\"MM\"\n      type=\"text\"\n      @blur=\"commitTimeInput('minute')\"\n      @focus=\"selectInputText\"\n      @input=\"handleTimeInput('minute', $event)\"\n    />\n  </div>\n\n  <PopoverRoot v-else v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <button\n        v-bind=\"$attrs\"\n        data-slot=\"date-picker-trigger\"\n        type=\"button\"\n        :disabled=\"props.disabled\"\n        :class=\"\n          cn(\n            'border-input bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 flex h-9 w-full items-center justify-start gap-2 rounded-md border px-3 py-2 text-left text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',\n            !hasDisplayValue && 'text-muted-foreground',\n            props.class,\n          )\n        \"\n      >\n        <CalendarIcon aria-hidden=\"true\" class=\"size-4 shrink-0\" />\n        <span class=\"min-w-0 flex-1 truncate\">\n          {{ hasDisplayValue ? displayValue : props.placeholder }}\n        </span>\n      </button>\n    </PopoverTrigger>\n\n    <PopoverPortal>\n      <PopoverContent\n        data-slot=\"date-picker-content\"\n        align=\"start\"\n        :side-offset=\"4\"\n        :class=\"\n          cn(\n            'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 max-w-[calc(100vw-2rem)] rounded-md border p-3 shadow-md outline-none',\n            props.contentClass,\n          )\n        \"\n      >\n        <div data-slot=\"date-picker-panel\" class=\"flex flex-col gap-3\">\n          <div data-slot=\"date-picker-calendar\" class=\"grid gap-3\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                data-slot=\"date-picker-prev-month\"\n                type=\"button\"\n                aria-label=\"Previous month\"\n                class=\"hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring inline-flex size-8 items-center justify-center rounded-md text-foreground transition-colors outline-none focus-visible:ring-2\"\n                @click=\"moveMonth(-1)\"\n              >\n                <ChevronLeftIcon aria-hidden=\"true\" class=\"size-4\" />\n              </button>\n\n              <div\n                data-slot=\"date-picker-calendar-heading\"\n                class=\"text-base font-semibold\"\n              >\n                {{ calendarTitle }}\n              </div>\n\n              <button\n                data-slot=\"date-picker-next-month\"\n                type=\"button\"\n                aria-label=\"Next month\"\n                class=\"hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring inline-flex size-8 items-center justify-center rounded-md text-foreground transition-colors outline-none focus-visible:ring-2\"\n                @click=\"moveMonth(1)\"\n              >\n                <ChevronRightIcon aria-hidden=\"true\" class=\"size-4\" />\n              </button>\n            </div>\n\n            <div\n              data-slot=\"date-picker-weekdays\"\n              class=\"grid grid-cols-7 gap-1 text-center text-xs font-medium text-muted-foreground\"\n            >\n              <span v-for=\"day in weekDays\" :key=\"day\">\n                {{ day }}\n              </span>\n            </div>\n\n            <div\n              data-slot=\"date-picker-days\"\n              :class=\"cn('grid grid-cols-7', isRange ? 'gap-0' : 'gap-1')\"\n              @mouseleave=\"clearRangeHoveredDate\"\n            >\n              <button\n                v-for=\"day in calendarDays\"\n                :key=\"day.date\"\n                data-slot=\"date-picker-day\"\n                type=\"button\"\n                :aria-label=\"formatDateLabel(day.date)\"\n                :aria-current=\"day.today ? 'date' : undefined\"\n                :aria-pressed=\"day.selected\"\n                :disabled=\"day.disabled\"\n                :class=\"\n                  cn(\n                    'hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring relative flex h-8 w-full items-center justify-center rounded-md text-sm font-medium transition-colors outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-40',\n                    !day.currentMonth && !day.rangeActive && 'text-muted-foreground/60',\n                    day.rangeActive && 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground',\n                    isRange && day.rangeActive && 'rounded-none',\n                    isRange && day.rangeStart && !day.rangeEnd && 'rounded-l-md',\n                    isRange && day.rangeEnd && !day.rangeStart && 'rounded-r-md',\n                    isRange && day.rangeStart && day.rangeEnd && 'rounded-md',\n                  )\n                \"\n                @click=\"selectCalendarDate(day.date)\"\n                @focus=\"setRangeHoveredDate(day.date)\"\n                @mouseenter=\"setRangeHoveredDate(day.date)\"\n              >\n                <span>{{ day.day }}</span>\n                <span\n                  v-if=\"day.today\"\n                  aria-hidden=\"true\"\n                  :class=\"\n                    cn(\n                      'absolute bottom-0.5 left-1/2 size-1 -translate-x-1/2 rounded-full',\n                      day.rangeActive ? 'bg-primary-foreground' : 'bg-primary',\n                    )\n                  \"\n                />\n              </button>\n            </div>\n          </div>\n        </div>\n      </PopoverContent>\n    </PopoverPortal>\n  </PopoverRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/date-picker/DatePicker.vue"
+    },
+    {
+      "path": "src/components/ui/date-picker/index.ts",
+      "content": "export { default as DatePicker } from \"./DatePicker.vue\"\nexport type {\n  DatePickerMode,\n  DatePickerRangeObjectValue,\n  DatePickerSingleObjectValue,\n  DatePickerValue,\n} from \"./DatePicker.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/date-picker/index.ts"
+    },
+    {
+      "path": "src/lib/utils.ts",
+      "content": "import { type ClassValue, clsx } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n",
+      "type": "registry:lib",
+      "target": "lib/utils.ts"
+    }
+  ],
+  "type": "registry:ui"
+}