@slexn/codecenter-ui 1.0.0

package/public/r/select.json

@@ -0,0 +1,100 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "select",
+  "title": "Select",
+  "description": "A select control with styled option menus, option descriptions, groups, disabled options, and optional search.",
+  "dependencies": [
+    "@lucide/vue",
+    "@vueuse/core",
+    "clsx",
+    "reka-ui",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/select/Select.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from \"reka-ui\"\nimport { SelectRoot, useForwardPropsEmits } from \"reka-ui\"\n\nconst props = defineProps<SelectRootProps>()\nconst emits = defineEmits<SelectRootEmits>()\n\nconst forwarded = useForwardPropsEmits(props, emits)\n</script>\n\n<template>\n  <SelectRoot\n    v-slot=\"slotProps\"\n    data-slot=\"select\"\n    v-bind=\"forwarded\"\n  >\n    <slot v-bind=\"slotProps\" />\n  </SelectRoot>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/select/Select.vue"
+    },
+    {
+      "path": "src/components/ui/select/SelectTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SelectTriggerProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { ChevronDown } from \"@lucide/vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { SelectIcon, SelectTrigger, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = withDefaults(\n  defineProps<SelectTriggerProps & { class?: HTMLAttributes[\"class\"], size?: \"sm\" | \"default\" }>(),\n  { size: \"default\" },\n)\n\nconst delegatedProps = reactiveOmit(props, \"class\", \"size\")\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectTrigger\n    data-slot=\"select-trigger\"\n    :data-size=\"size\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=text-])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n      props.class,\n    )\"\n  >\n    <slot />\n    <SelectIcon as-child>\n      <ChevronDown class=\"size-4 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/select/SelectTrigger.vue"
+    },
+    {
+      "path": "src/components/ui/select/SelectValue.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SelectValueProps } from \"reka-ui\"\nimport { SelectValue } from \"reka-ui\"\n\nconst props = defineProps<SelectValueProps>()\n</script>\n\n<template>\n  <SelectValue\n    data-slot=\"select-value\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </SelectValue>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/select/SelectValue.vue"
+    },
+    {
+      "path": "src/components/ui/select/SelectContent.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SelectContentEmits, SelectContentProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { computed, nextTick, provide, ref, shallowReactive } from \"vue\"\nimport { Search, X } from \"@lucide/vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport {\n  SelectContent,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport { SelectScrollDownButton, SelectScrollUpButton } from \".\"\nimport {\n  normalizeSelectSearchText,\n  selectSearchContextKey,\n  type SelectSearchItem,\n} from \"./search\"\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(\n  defineProps<SelectContentProps & {\n    class?: HTMLAttributes[\"class\"]\n    emptyText?: string\n    search?: boolean\n    searchClearLabel?: string\n    searchPlaceholder?: string\n    검색?: boolean\n  }>(),\n  {\n    emptyText: \"No results found.\",\n    position: \"popper\",\n    search: false,\n    searchClearLabel: \"Clear search\",\n    searchPlaceholder: \"Search options\",\n    검색: false,\n  },\n)\nconst emits = defineEmits<SelectContentEmits>()\n\nconst delegatedProps = reactiveOmit(\n  props,\n  \"class\",\n  \"emptyText\",\n  \"search\",\n  \"searchClearLabel\",\n  \"searchPlaceholder\",\n  \"검색\",\n)\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\nconst searchQuery = ref(\"\")\nconst searchInputRef = ref<HTMLInputElement | null>(null)\nconst searchItems = shallowReactive(new Map<symbol, SelectSearchItem>())\nconst isSearchEnabled = computed(() => props.search || props.검색)\nconst normalizedSearchQuery = computed(() => normalizeSelectSearchText(searchQuery.value))\nconst hasSearchQuery = computed(() => normalizedSearchQuery.value.length > 0)\nconst hasVisibleItems = computed(() => {\n  if (!isSearchEnabled.value || !hasSearchQuery.value) return true\n\n  return Array.from(searchItems.values()).some((item) => item.matches.value)\n})\n\nfunction hasVisibleItemsInGroup(groupId: symbol) {\n  if (!isSearchEnabled.value || !hasSearchQuery.value) return true\n\n  return Array.from(searchItems.values()).some(\n    (item) => item.groupId === groupId && item.matches.value,\n  )\n}\n\nfunction handleSearchKeydown(event: KeyboardEvent) {\n  if (event.key === \"Escape\" && searchQuery.value) {\n    searchQuery.value = \"\"\n    event.preventDefault()\n    event.stopPropagation()\n    return\n  }\n\n  if (event.key !== \"Escape\") {\n    event.stopPropagation()\n  }\n}\n\nfunction clearSearch() {\n  searchQuery.value = \"\"\n\n  void nextTick(() => searchInputRef.value?.focus())\n}\n\nprovide(selectSearchContextKey, {\n  enabled: isSearchEnabled,\n  hasQuery: hasSearchQuery,\n  hasVisibleItems,\n  query: normalizedSearchQuery,\n  hasVisibleItemsInGroup,\n  registerItem: (item) => searchItems.set(item.id, item),\n  unregisterItem: (id) => searchItems.delete(id),\n})\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      data-slot=\"select-content\"\n      v-bind=\"{ ...$attrs, ...forwarded }\"\n      :class=\"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 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        props.class,\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <div v-if=\"isSearchEnabled\" data-slot=\"select-search\" class=\"border-b p-1\">\n        <div class=\"relative\">\n          <Search\n            aria-hidden=\"true\"\n            class=\"pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 text-muted-foreground\"\n          />\n          <input\n            ref=\"searchInputRef\"\n            v-model=\"searchQuery\"\n            data-slot=\"select-search-input\"\n            type=\"text\"\n            role=\"searchbox\"\n            autocomplete=\"off\"\n            :placeholder=\"props.searchPlaceholder\"\n            class=\"h-8 w-full rounded-sm bg-transparent py-1.5 pr-8 pl-8 text-sm outline-none placeholder:text-muted-foreground focus:bg-accent focus:text-accent-foreground\"\n            @click.stop\n            @keydown=\"handleSearchKeydown\"\n            @pointerdown.stop\n          />\n          <button\n            v-if=\"searchQuery\"\n            data-slot=\"select-search-clear\"\n            type=\"button\"\n            :aria-label=\"props.searchClearLabel\"\n            class=\"absolute top-1/2 right-1 flex size-6 -translate-y-1/2 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none\"\n            @click.stop.prevent=\"clearSearch\"\n            @keydown.stop\n            @pointerdown.stop.prevent\n          >\n            <X aria-hidden=\"true\" class=\"size-4\" />\n          </button>\n        </div>\n      </div>\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')\">\n        <slot />\n        <div\n          v-if=\"isSearchEnabled && hasSearchQuery && !hasVisibleItems\"\n          data-slot=\"select-empty\"\n          class=\"px-2 py-6 text-center text-sm text-muted-foreground\"\n        >\n          {{ props.emptyText }}\n        </div>\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/select/SelectContent.vue"
+    },
+    {
+      "path": "src/components/ui/select/SelectGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SelectGroupProps } from \"reka-ui\"\nimport { computed, inject, provide } from \"vue\"\nimport { SelectGroup } from \"reka-ui\"\nimport { selectSearchContextKey, selectSearchGroupKey } from \"./search\"\n\nconst props = defineProps<SelectGroupProps>()\nconst groupId = Symbol(\"select-group\")\nconst searchContext = inject(selectSearchContextKey, null)\nconst isVisible = computed(() => searchContext?.hasVisibleItemsInGroup(groupId) ?? true)\n\nprovide(selectSearchGroupKey, groupId)\n</script>\n\n<template>\n  <SelectGroup\n    v-show=\"isVisible\"\n    data-slot=\"select-group\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </SelectGroup>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/select/SelectGroup.vue"
+    },
+    {
+      "path": "src/components/ui/select/SelectItem.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SelectItemProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { computed, inject, onBeforeUnmount } from \"vue\"\nimport { Check } from \"@lucide/vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  SelectItemText,\n  useForwardProps,\n} from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport {\n  normalizeSelectSearchText,\n  selectSearchContextKey,\n  selectSearchGroupKey,\n} from \"./search\"\n\nconst props = defineProps<SelectItemProps & {\n  class?: HTMLAttributes[\"class\"]\n  description?: string\n  descriptionClass?: HTMLAttributes[\"class\"]\n}>()\n\nconst delegatedProps = reactiveOmit(props, \"class\", \"description\", \"descriptionClass\")\n\nconst forwardedProps = useForwardProps(delegatedProps)\nconst searchContext = inject(selectSearchContextKey, null)\nconst groupId = inject(selectSearchGroupKey, undefined)\nconst itemId = Symbol(\"select-item\")\nconst itemSearchText = computed(() =>\n  normalizeSelectSearchText(\n    [props.textValue ?? props.value, props.description].filter(Boolean).join(\" \"),\n  ),\n)\nconst matchesSearch = computed(() => {\n  if (!searchContext?.enabled.value || !searchContext.hasQuery.value) return true\n\n  return itemSearchText.value.includes(searchContext.query.value)\n})\nconst isVisible = computed(() => matchesSearch.value)\n\nif (searchContext) {\n  searchContext.registerItem({\n    groupId,\n    id: itemId,\n    matches: matchesSearch,\n  })\n\n  onBeforeUnmount(() => searchContext.unregisterItem(itemId))\n}\n</script>\n\n<template>\n  <SelectItem\n    v-if=\"isVisible\"\n    data-slot=\"select-item\"\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'group focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=text-])]:text-muted-foreground relative flex w-full cursor-default items-start gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        props.class,\n      )\n    \"\n  >\n    <span class=\"absolute top-1/2 right-2 flex size-3.5 -translate-y-1/2 items-center justify-center\">\n      <SelectItemIndicator>\n        <slot name=\"indicator-icon\">\n          <Check class=\"size-4\" />\n        </slot>\n      </SelectItemIndicator>\n    </span>\n\n    <span class=\"grid min-w-0 gap-0.5\">\n      <SelectItemText>\n        <span data-slot=\"select-item-label\" class=\"truncate\">\n          <slot />\n        </span>\n      </SelectItemText>\n      <span\n        v-if=\"props.description || $slots.description\"\n        data-slot=\"select-item-description\"\n        :class=\"\n          cn(\n            'text-xs leading-snug text-muted-foreground group-data-[highlighted]:text-accent-foreground/80 group-focus:text-accent-foreground/80',\n            props.descriptionClass,\n          )\n        \"\n      >\n        <slot name=\"description\">\n          {{ props.description }}\n        </slot>\n      </span>\n    </span>\n  </SelectItem>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/select/SelectItem.vue"
+    },
+    {
+      "path": "src/components/ui/select/SelectItemText.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SelectItemTextProps } from \"reka-ui\"\nimport { SelectItemText } from \"reka-ui\"\n\nconst props = defineProps<SelectItemTextProps>()\n</script>\n\n<template>\n  <SelectItemText\n    data-slot=\"select-item-text\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </SelectItemText>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/select/SelectItemText.vue"
+    },
+    {
+      "path": "src/components/ui/select/SelectLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SelectLabelProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { SelectLabel } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<SelectLabelProps & { class?: HTMLAttributes[\"class\"] }>()\n</script>\n\n<template>\n  <SelectLabel\n    data-slot=\"select-label\"\n    :class=\"cn('text-muted-foreground px-2 py-1.5 text-xs', props.class)\"\n  >\n    <slot />\n  </SelectLabel>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/select/SelectLabel.vue"
+    },
+    {
+      "path": "src/components/ui/select/SelectSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SelectSeparatorProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { SelectSeparator } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n</script>\n\n<template>\n  <SelectSeparator\n    data-slot=\"select-separator\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)\"\n  />\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/select/SelectSeparator.vue"
+    },
+    {
+      "path": "src/components/ui/select/SelectScrollUpButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SelectScrollUpButtonProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { ChevronUp } from \"@lucide/vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { SelectScrollUpButton, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollUpButton\n    data-slot=\"select-scroll-up-button\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\"\n  >\n    <slot>\n      <ChevronUp class=\"size-4\" />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/select/SelectScrollUpButton.vue"
+    },
+    {
+      "path": "src/components/ui/select/SelectScrollDownButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { SelectScrollDownButtonProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { ChevronDown } from \"@lucide/vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { SelectScrollDownButton, useForwardProps } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n\nconst forwardedProps = useForwardProps(delegatedProps)\n</script>\n\n<template>\n  <SelectScrollDownButton\n    data-slot=\"select-scroll-down-button\"\n    v-bind=\"forwardedProps\"\n    :class=\"cn('flex cursor-default items-center justify-center py-1', props.class)\"\n  >\n    <slot>\n      <ChevronDown class=\"size-4\" />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/select/SelectScrollDownButton.vue"
+    },
+    {
+      "path": "src/components/ui/select/search.ts",
+      "content": "import type { ComputedRef, InjectionKey } from \"vue\"\n\nexport interface SelectSearchItem {\n  groupId?: symbol\n  id: symbol\n  matches: ComputedRef<boolean>\n}\n\nexport interface SelectSearchContext {\n  enabled: ComputedRef<boolean>\n  hasQuery: ComputedRef<boolean>\n  hasVisibleItems: ComputedRef<boolean>\n  query: ComputedRef<string>\n  hasVisibleItemsInGroup: (groupId: symbol) => boolean\n  registerItem: (item: SelectSearchItem) => void\n  unregisterItem: (id: symbol) => void\n}\n\nexport const selectSearchContextKey: InjectionKey<SelectSearchContext> =\n  Symbol(\"select-search-context\")\n\nexport const selectSearchGroupKey: InjectionKey<symbol> = Symbol(\"select-search-group\")\n\nexport function normalizeSelectSearchText(value: unknown) {\n  return String(value ?? \"\").trim().toLocaleLowerCase()\n}\n",
+      "type": "registry:ui",
+      "target": "components/ui/select/search.ts"
+    },
+    {
+      "path": "src/components/ui/select/index.ts",
+      "content": "export { default as Select } from \"./Select.vue\"\nexport { default as SelectContent } from \"./SelectContent.vue\"\nexport { default as SelectGroup } from \"./SelectGroup.vue\"\nexport { default as SelectItem } from \"./SelectItem.vue\"\nexport { default as SelectItemText } from \"./SelectItemText.vue\"\nexport { default as SelectLabel } from \"./SelectLabel.vue\"\nexport { default as SelectScrollDownButton } from \"./SelectScrollDownButton.vue\"\nexport { default as SelectScrollUpButton } from \"./SelectScrollUpButton.vue\"\nexport { default as SelectSeparator } from \"./SelectSeparator.vue\"\nexport { default as SelectTrigger } from \"./SelectTrigger.vue\"\nexport { default as SelectValue } from \"./SelectValue.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/select/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/separator.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "separator",
+  "title": "Separator",
+  "description": "A horizontal or vertical divider for separating related content.",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/separator/Separator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport type { SeparatorProps } from \"./types\"\n\nconst props = withDefaults(defineProps<SeparatorProps>(), {\n  decorative: true,\n  orientation: \"horizontal\",\n})\n\nconst separatorRole = computed(() => props.decorative ? undefined : \"separator\")\nconst ariaOrientation = computed(() =>\n  props.decorative ? undefined : props.orientation,\n)\n</script>\n\n<template>\n  <div\n    data-slot=\"separator\"\n    :data-orientation=\"props.orientation\"\n    :role=\"separatorRole\"\n    :aria-orientation=\"ariaOrientation\"\n    :class=\"\n      cn(\n        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',\n        props.class,\n      )\n    \"\n  />\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/separator/Separator.vue"
+    },
+    {
+      "path": "src/components/ui/separator/types.ts",
+      "content": "import type { HTMLAttributes } from \"vue\"\n\nexport type SeparatorOrientation = \"horizontal\" | \"vertical\"\n\nexport interface SeparatorProps {\n  class?: HTMLAttributes[\"class\"]\n  decorative?: boolean\n  orientation?: SeparatorOrientation\n}\n",
+      "type": "registry:ui",
+      "target": "components/ui/separator/types.ts"
+    },
+    {
+      "path": "src/components/ui/separator/index.ts",
+      "content": "export { default as Separator } from \"./Separator.vue\"\nexport type {\n  SeparatorOrientation,\n  SeparatorProps,\n} from \"./types\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/separator/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/shimmer.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "shimmer",
+  "title": "Shimmer",
+  "description": "An animated text shimmer for loading states and progressive reveal effects.",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/shimmer/Shimmer.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from \"vue\"\nimport type { CSSProperties, HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ShimmerTone = \"default\" | \"muted\" | \"primary\" | \"success\" | \"warning\"\n\nexport interface ShimmerProps {\n  as?: string\n  class?: HTMLAttributes[\"class\"]\n  decorative?: boolean\n  delay?: string\n  disabled?: boolean\n  duration?: string\n  label?: string\n  text?: string\n  tone?: ShimmerTone\n}\n\nconst props = withDefaults(defineProps<ShimmerProps>(), {\n  as: \"span\",\n  decorative: false,\n  delay: \"0s\",\n  disabled: false,\n  duration: \"3.6s\",\n  tone: \"default\",\n})\n\nconst shimmerStyle = computed<CSSProperties>(() => ({\n  \"--shimmer-delay\": props.delay,\n  \"--shimmer-duration\": props.duration,\n} as CSSProperties))\n</script>\n\n<template>\n  <component\n    :is=\"props.as\"\n    data-slot=\"shimmer\"\n    :data-animated=\"props.disabled ? 'false' : 'true'\"\n    :data-tone=\"props.tone\"\n    :aria-hidden=\"props.decorative ? 'true' : undefined\"\n    :aria-label=\"props.decorative ? undefined : props.label\"\n    :class=\"cn('inline-block font-medium leading-none tracking-normal', props.class)\"\n    :role=\"!props.decorative && props.label ? 'status' : undefined\"\n    :style=\"shimmerStyle\"\n  >\n    <slot>{{ props.text }}</slot>\n  </component>\n</template>\n\n<style scoped>\n@keyframes shimmer-text-sweep {\n  0% {\n    background-position: 180% 0;\n  }\n\n  100% {\n    background-position: -180% 0;\n  }\n}\n\n[data-slot=\"shimmer\"] {\n  --shimmer-base: color-mix(in oklab, var(--foreground) 38%, transparent);\n  --shimmer-highlight: var(--foreground);\n  color: var(--shimmer-highlight);\n}\n\n[data-slot=\"shimmer\"][data-tone=\"muted\"] {\n  --shimmer-base: color-mix(in oklab, var(--muted-foreground) 36%, transparent);\n  --shimmer-highlight: var(--muted-foreground);\n}\n\n[data-slot=\"shimmer\"][data-tone=\"primary\"] {\n  --shimmer-base: color-mix(in oklab, var(--primary) 38%, transparent);\n  --shimmer-highlight: var(--primary);\n}\n\n[data-slot=\"shimmer\"][data-tone=\"success\"] {\n  --shimmer-base: oklch(0.58 0.15 154 / 38%);\n  --shimmer-highlight: oklch(0.58 0.15 154);\n}\n\n[data-slot=\"shimmer\"][data-tone=\"warning\"] {\n  --shimmer-base: oklch(0.67 0.17 68 / 42%);\n  --shimmer-highlight: oklch(0.58 0.15 68);\n}\n\n[data-slot=\"shimmer\"][data-animated=\"true\"] {\n  animation: shimmer-text-sweep var(--shimmer-duration) ease-in-out var(--shimmer-delay) infinite;\n  background-image: linear-gradient(\n    110deg,\n    var(--shimmer-base) 0%,\n    var(--shimmer-base) 36%,\n    var(--shimmer-highlight) 50%,\n    var(--shimmer-base) 64%,\n    var(--shimmer-base) 100%\n  );\n  background-size: 260% 100%;\n  -webkit-background-clip: text;\n  background-clip: text;\n  -webkit-text-fill-color: transparent;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  [data-slot=\"shimmer\"][data-animated=\"true\"] {\n    animation: none;\n    background-position: 50% 0;\n  }\n}\n</style>\n",
+      "type": "registry:ui",
+      "target": "components/ui/shimmer/Shimmer.vue"
+    },
+    {
+      "path": "src/components/ui/shimmer/index.ts",
+      "content": "export { default as Shimmer } from \"./Shimmer.vue\"\nexport type {\n  ShimmerProps,\n  ShimmerTone,\n} from \"./Shimmer.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/shimmer/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/sidebar.json

@@ -0,0 +1,221 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "sidebar",
+  "title": "Sidebar",
+  "description": "A composable application sidebar with provider-managed open state, menu groups, trigger controls, and collapsed icon mode.",
+  "dependencies": [
+    "@lucide/vue",
+    "@vueuse/core",
+    "class-variance-authority",
+    "clsx",
+    "reka-ui",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/sidebar/Sidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport {\n  SIDEBAR_WIDTH,\n  SIDEBAR_WIDTH_ICON,\n  SIDEBAR_WIDTH_MOBILE,\n  useOptionalSidebar,\n} from \"./context\"\nimport type { SidebarProps } from \"./types\"\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  collapsible: \"offcanvas\",\n  side: \"left\",\n  variant: \"sidebar\",\n})\n\nconst sidebar = useOptionalSidebar()\n\nconst state = computed(() => sidebar?.state.value ?? \"expanded\")\nconst isMobile = computed(() => sidebar?.isMobile.value ?? false)\nconst isMobileOpen = computed(() => sidebar?.openMobile.value ?? false)\nconst dataCollapsible = computed(() =>\n  state.value === \"collapsed\" ? props.collapsible : \"\",\n)\n\nfunction closeMobile() {\n  sidebar?.setOpenMobile(false)\n}\n</script>\n\n<template>\n  <aside\n    v-if=\"props.collapsible === 'none'\"\n    data-slot=\"sidebar\"\n    data-state=\"expanded\"\n    data-collapsible=\"\"\n    :data-side=\"props.side\"\n    :data-variant=\"props.variant\"\n    :style=\"{\n      '--sidebar-width': SIDEBAR_WIDTH,\n      '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      '--sidebar-width-mobile': SIDEBAR_WIDTH_MOBILE,\n    }\"\n    :class=\"cn('flex h-full w-(--sidebar-width) shrink-0 flex-col border-r bg-background text-foreground', props.side === 'right' && 'border-r-0 border-l', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </aside>\n\n  <div\n    v-else-if=\"isMobile\"\n    data-slot=\"sidebar-mobile\"\n    :style=\"{\n      '--sidebar-width': SIDEBAR_WIDTH,\n      '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      '--sidebar-width-mobile': SIDEBAR_WIDTH_MOBILE,\n    }\"\n  >\n    <button\n      v-if=\"isMobileOpen\"\n      data-slot=\"sidebar-mobile-overlay\"\n      type=\"button\"\n      class=\"fixed inset-0 z-50 bg-[var(--overlay)] backdrop-blur-[4px] [-webkit-backdrop-filter:blur(4px)] md:hidden\"\n      aria-label=\"Close sidebar\"\n      @click=\"closeMobile\"\n    />\n    <aside\n      v-if=\"isMobileOpen\"\n      data-slot=\"sidebar\"\n      data-mobile=\"true\"\n      :data-state=\"state\"\n      :data-side=\"props.side\"\n      :data-variant=\"props.variant\"\n      :class=\"\n        cn(\n          'fixed inset-y-0 z-50 flex w-(--sidebar-width-mobile) max-w-[calc(100vw-2rem)] flex-col bg-background text-foreground shadow-lg md:hidden',\n          props.side === 'left' ? 'left-0 border-r' : 'right-0 border-l',\n          props.class,\n        )\n      \"\n      v-bind=\"$attrs\"\n    >\n      <slot />\n    </aside>\n  </div>\n\n  <div\n    v-else\n    data-slot=\"sidebar\"\n    class=\"group peer hidden text-foreground md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"dataCollapsible\"\n    :data-side=\"props.side\"\n    :data-variant=\"props.variant\"\n    :style=\"{\n      '--sidebar-width': SIDEBAR_WIDTH,\n      '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      '--sidebar-width-mobile': SIDEBAR_WIDTH_MOBILE,\n    }\"\n  >\n    <div\n      data-slot=\"sidebar-gap\"\n      :class=\"\n        cn(\n          'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',\n          'group-data-[collapsible=offcanvas]:w-0',\n          props.variant === 'floating' || props.variant === 'inset'\n            ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]'\n            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',\n        )\n      \"\n    />\n    <div\n      data-slot=\"sidebar-container\"\n      :class=\"\n        cn(\n          'fixed inset-y-0 z-10 hidden h-dvh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',\n          props.side === 'left'\n            ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n            : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n          props.variant === 'floating' || props.variant === 'inset'\n            ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+1rem)]'\n            : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n          props.class,\n        )\n      \"\n      v-bind=\"$attrs\"\n    >\n      <aside\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-background group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm group-data-[variant=inset]:rounded-lg group-data-[variant=inset]:border group-data-[variant=inset]:shadow-xs\"\n      >\n        <slot />\n      </aside>\n    </div>\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/Sidebar.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarProvider.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { computed, onMounted, ref, watch } from \"vue\"\nimport { useEventListener, useMediaQuery } from \"@vueuse/core\"\nimport { cn } from \"@/lib/utils\"\nimport {\n  provideSidebarContext,\n  SIDEBAR_KEYBOARD_SHORTCUT,\n  SIDEBAR_STORAGE_KEY,\n  SIDEBAR_WIDTH,\n  SIDEBAR_WIDTH_ICON,\n  SIDEBAR_WIDTH_MOBILE,\n} from \"./context\"\n\nexport interface SidebarProviderProps {\n  class?: HTMLAttributes[\"class\"]\n  defaultOpen?: boolean\n  keyboardShortcut?: string\n  open?: boolean\n  persist?: boolean\n  storageKey?: string\n}\n\nconst props = withDefaults(defineProps<SidebarProviderProps>(), {\n  defaultOpen: true,\n  keyboardShortcut: SIDEBAR_KEYBOARD_SHORTCUT,\n  open: undefined,\n  persist: false,\n  storageKey: SIDEBAR_STORAGE_KEY,\n})\n\nconst emits = defineEmits<{\n  \"update:open\": [open: boolean]\n}>()\n\nconst isMobile = useMediaQuery(\"(max-width: 768px)\")\nconst openMobile = ref(false)\nconst uncontrolledOpen = ref(props.defaultOpen)\nconst open = computed({\n  get: () => props.open ?? uncontrolledOpen.value,\n  set: (value: boolean) => {\n    uncontrolledOpen.value = value\n    emits(\"update:open\", value)\n  },\n})\n\nconst state = computed(() => open.value ? \"expanded\" : \"collapsed\")\n\nfunction setOpen(value: boolean) {\n  open.value = value\n}\n\nfunction setOpenMobile(value: boolean) {\n  openMobile.value = value\n}\n\nfunction toggleSidebar() {\n  if (isMobile.value) {\n    setOpenMobile(!openMobile.value)\n    return\n  }\n\n  setOpen(!open.value)\n}\n\nfunction isSidebarShortcut(event: KeyboardEvent) {\n  if (!props.keyboardShortcut) return false\n\n  return event.key.toLowerCase() === props.keyboardShortcut.toLowerCase()\n    && (event.metaKey || event.ctrlKey)\n}\n\nonMounted(() => {\n  if (!props.persist || props.open !== undefined) return\n\n  const storedValue = window.localStorage.getItem(props.storageKey)\n\n  if (storedValue === \"true\" || storedValue === \"false\") {\n    setOpen(storedValue === \"true\")\n  }\n})\n\nwatch(open, (value) => {\n  if (!props.persist) return\n\n  window.localStorage.setItem(props.storageKey, String(value))\n})\n\nuseEventListener(\"keydown\", (event: KeyboardEvent) => {\n  if (!isSidebarShortcut(event)) return\n\n  event.preventDefault()\n  toggleSidebar()\n})\n\nprovideSidebarContext({\n  isMobile,\n  open,\n  openMobile,\n  setOpen,\n  setOpenMobile,\n  state,\n  toggleSidebar,\n})\n</script>\n\n<template>\n  <div\n    data-slot=\"sidebar-wrapper\"\n    :style=\"{\n      '--sidebar-width': SIDEBAR_WIDTH,\n      '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n      '--sidebar-width-mobile': SIDEBAR_WIDTH_MOBILE,\n    }\"\n    :class=\"cn('group/sidebar-wrapper flex min-h-svh w-full bg-background text-foreground', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarProvider.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarInset.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  <main\n    data-slot=\"sidebar-inset\"\n    :class=\"\n      cn(\n        'relative flex min-w-0 flex-1 flex-col bg-background',\n        'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-lg md:peer-data-[variant=inset]:border md:peer-data-[variant=inset]:shadow-xs md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </main>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarInset.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarTrigger.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { PanelLeftIcon } from \"@lucide/vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"../button\"\nimport { useSidebar } from \"./context\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <Button\n    data-slot=\"sidebar-trigger\"\n    data-sidebar=\"trigger\"\n    type=\"button\"\n    variant=\"ghost\"\n    size=\"icon-sm\"\n    :class=\"cn(props.class)\"\n    @click=\"toggleSidebar\"\n  >\n    <PanelLeftIcon aria-hidden=\"true\" />\n    <span class=\"sr-only\">Toggle sidebar</span>\n  </Button>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarTrigger.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarRail.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { useSidebar } from \"./context\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n\nconst { toggleSidebar } = useSidebar()\n</script>\n\n<template>\n  <button\n    data-slot=\"sidebar-rail\"\n    data-sidebar=\"rail\"\n    type=\"button\"\n    aria-label=\"Toggle sidebar\"\n    title=\"Toggle sidebar\"\n    tabindex=\"-1\"\n    :class=\"\n      cn(\n        'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 hover:after:bg-border sm:flex',\n        'group-data-[side=left]:-right-4 group-data-[side=right]:left-0',\n        'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',\n        '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n        'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n        props.class,\n      )\n    \"\n    @click=\"toggleSidebar\"\n  >\n    <slot />\n  </button>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarRail.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarHeader.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\n    data-slot=\"sidebar-header\"\n    data-sidebar=\"header\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarHeader.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarContent.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\n    data-slot=\"sidebar-content\"\n    data-sidebar=\"content\"\n    :class=\"cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarContent.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarFooter.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\n    data-slot=\"sidebar-footer\"\n    data-sidebar=\"footer\"\n    :class=\"cn('flex flex-col gap-2 p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarFooter.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarGroup.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\n    data-slot=\"sidebar-group\"\n    data-sidebar=\"group\"\n    :class=\"cn('relative flex w-full min-w-0 flex-col p-2', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarGroup.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarGroupContent.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\n    data-slot=\"sidebar-group-content\"\n    data-sidebar=\"group-content\"\n    :class=\"cn('w-full text-sm', props.class)\"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarGroupContent.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarGroupLabel.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { Primitive } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  class?: HTMLAttributes[\"class\"]\n}>(), {\n  as: \"div\",\n})\n</script>\n\n<template>\n  <Primitive\n    data-slot=\"sidebar-group-label\"\n    data-sidebar=\"group-label\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"\n      cn(\n        'flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-muted-foreground outline-none transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 focus-visible:ring-ring [&>svg]:size-4 [&>svg]:shrink-0',\n        'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarGroupLabel.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarGroupAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { Primitive } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  class?: HTMLAttributes[\"class\"]\n}>(), {\n  as: \"button\",\n})\n</script>\n\n<template>\n  <Primitive\n    data-slot=\"sidebar-group-action\"\n    data-sidebar=\"group-action\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"\n      cn(\n        'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring [&>svg]:size-4 [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 md:after:hidden',\n        'group-data-[collapsible=icon]:hidden',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarGroupAction.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarMenu.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  <ul\n    data-slot=\"sidebar-menu\"\n    data-sidebar=\"menu\"\n    :class=\"cn('flex w-full min-w-0 flex-col gap-1', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarMenu.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarMenuItem.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  <li\n    data-slot=\"sidebar-menu-item\"\n    data-sidebar=\"menu-item\"\n    :class=\"cn('group/menu-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarMenuItem.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarMenuButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport SidebarMenuButtonChild, {\n  type SidebarMenuButtonProps,\n} from \"./SidebarMenuButtonChild.vue\"\nimport { useOptionalSidebar } from \"./context\"\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps & {\n  tooltip?: string\n}>(), {\n  as: \"button\",\n  size: \"default\",\n  variant: \"default\",\n})\n\nconst sidebar = useOptionalSidebar()\nconst delegatedProps = reactiveOmit(props, \"tooltip\")\nconst tooltipTitle = computed(() =>\n  props.tooltip && sidebar?.state.value === \"collapsed\" && !sidebar?.isMobile.value\n    ? props.tooltip\n    : undefined,\n)\n</script>\n\n<template>\n  <SidebarMenuButtonChild\n    v-bind=\"{ ...delegatedProps, ...$attrs }\"\n    :title=\"tooltipTitle\"\n  >\n    <slot />\n  </SidebarMenuButtonChild>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarMenuButton.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarMenuButtonChild.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { Primitive } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport {\n  sidebarMenuButtonVariants,\n  type SidebarMenuButtonVariants,\n} from \"./variants\"\n\nexport interface SidebarMenuButtonProps extends PrimitiveProps {\n  class?: HTMLAttributes[\"class\"]\n  isActive?: boolean\n  size?: SidebarMenuButtonVariants[\"size\"]\n  variant?: SidebarMenuButtonVariants[\"variant\"]\n}\n\nconst props = withDefaults(defineProps<SidebarMenuButtonProps>(), {\n  as: \"button\",\n  size: \"default\",\n  variant: \"default\",\n})\n</script>\n\n<template>\n  <Primitive\n    data-slot=\"sidebar-menu-button\"\n    data-sidebar=\"menu-button\"\n    :data-active=\"props.isActive ? 'true' : undefined\"\n    :data-size=\"props.size\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"cn(sidebarMenuButtonVariants({ size: props.size, variant: props.variant }), props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarMenuButtonChild.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarMenuAction.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { Primitive } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  class?: HTMLAttributes[\"class\"]\n  showOnHover?: boolean\n}>(), {\n  as: \"button\",\n})\n</script>\n\n<template>\n  <Primitive\n    data-slot=\"sidebar-menu-action\"\n    data-sidebar=\"menu-action\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :class=\"\n      cn(\n        'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-muted-foreground outline-none transition-[color,opacity] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring peer-hover/menu-button:text-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n        'after:absolute after:-inset-2 md:after:hidden',\n        'peer-data-[size=sm]/menu-button:top-1 peer-data-[size=lg]/menu-button:top-3',\n        'group-data-[collapsible=icon]:hidden',\n        props.showOnHover && 'opacity-100 md:opacity-0 group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:opacity-100',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarMenuAction.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarMenuBadge.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\n    data-slot=\"sidebar-menu-badge\"\n    data-sidebar=\"menu-badge\"\n    :class=\"\n      cn(\n        'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-muted-foreground peer-hover/menu-button:text-accent-foreground peer-data-[active=true]/menu-button:text-accent-foreground',\n        'peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-3',\n        'group-data-[collapsible=icon]:hidden',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </div>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarMenuBadge.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarMenuSub.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  <ul\n    data-slot=\"sidebar-menu-sub\"\n    data-sidebar=\"menu-sub\"\n    :class=\"cn('mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden', props.class)\"\n  >\n    <slot />\n  </ul>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarMenuSub.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarMenuSubItem.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  <li\n    data-slot=\"sidebar-menu-sub-item\"\n    data-sidebar=\"menu-sub-item\"\n    :class=\"cn('group/menu-sub-item relative', props.class)\"\n  >\n    <slot />\n  </li>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarMenuSubItem.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarMenuSubButton.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { PrimitiveProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { Primitive } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = withDefaults(defineProps<PrimitiveProps & {\n  class?: HTMLAttributes[\"class\"]\n  isActive?: boolean\n  size?: \"md\" | \"sm\"\n}>(), {\n  as: \"a\",\n  size: \"md\",\n})\n</script>\n\n<template>\n  <Primitive\n    data-slot=\"sidebar-menu-sub-button\"\n    data-sidebar=\"menu-sub-button\"\n    :as=\"props.as\"\n    :as-child=\"props.asChild\"\n    :data-active=\"props.isActive ? 'true' : undefined\"\n    :data-size=\"props.size\"\n    :class=\"\n      cn(\n        'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:text-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n        props.size === 'sm' ? 'text-xs' : 'text-sm',\n        'group-data-[collapsible=icon]:hidden',\n        props.class,\n      )\n    \"\n  >\n    <slot />\n  </Primitive>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarMenuSubButton.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarInput.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <input\n    data-slot=\"sidebar-input\"\n    data-sidebar=\"input\"\n    :class=\"\n      cn(\n        'flex h-8 w-full min-w-0 rounded-md border border-input bg-background px-2.5 py-1 text-sm text-foreground shadow-none outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50',\n        props.class,\n      )\n    \"\n    v-bind=\"$attrs\"\n  >\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarInput.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/SidebarSeparator.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"../separator\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <Separator\n    data-slot=\"sidebar-separator\"\n    data-sidebar=\"separator\"\n    decorative\n    :class=\"cn('mx-2 w-auto', props.class)\"\n  />\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/SidebarSeparator.vue"
+    },
+    {
+      "path": "src/components/ui/sidebar/context.ts",
+      "content": "import type { ComputedRef, InjectionKey, Ref } from \"vue\"\nimport { inject, provide } from \"vue\"\nimport type { SidebarState } from \"./types\"\n\nexport const SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\nexport const SIDEBAR_STORAGE_KEY = \"sidebar_state\"\nexport const SIDEBAR_WIDTH = \"16rem\"\nexport const SIDEBAR_WIDTH_ICON = \"3.25rem\"\nexport const SIDEBAR_WIDTH_MOBILE = \"18rem\"\n\nexport interface SidebarContext {\n  isMobile: Ref<boolean>\n  open: Ref<boolean>\n  openMobile: Ref<boolean>\n  setOpen: (value: boolean) => void\n  setOpenMobile: (value: boolean) => void\n  state: ComputedRef<SidebarState>\n  toggleSidebar: () => void\n}\n\nconst sidebarContextKey: InjectionKey<SidebarContext> = Symbol(\"SidebarContext\")\n\nexport function provideSidebarContext(context: SidebarContext) {\n  provide(sidebarContextKey, context)\n}\n\nexport function useOptionalSidebar() {\n  return inject(sidebarContextKey, null)\n}\n\nexport function useSidebar() {\n  const context = useOptionalSidebar()\n\n  if (!context) {\n    throw new Error(\"Sidebar components must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/context.ts"
+    },
+    {
+      "path": "src/components/ui/sidebar/types.ts",
+      "content": "import type { HTMLAttributes } from \"vue\"\n\nexport type SidebarCollapsible = \"offcanvas\" | \"icon\" | \"none\"\nexport type SidebarSide = \"left\" | \"right\"\nexport type SidebarState = \"collapsed\" | \"expanded\"\nexport type SidebarVariant = \"floating\" | \"inset\" | \"sidebar\"\n\nexport interface SidebarProps {\n  class?: HTMLAttributes[\"class\"]\n  collapsible?: SidebarCollapsible\n  side?: SidebarSide\n  variant?: SidebarVariant\n}\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/types.ts"
+    },
+    {
+      "path": "src/components/ui/sidebar/variants.ts",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\n\nexport const sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full min-w-0 items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-ring transition-[background-color,color,width,height,padding] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 active:bg-accent active:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-accent data-[active=true]:font-medium data-[active=true]:text-accent-foreground group-data-[collapsible=icon]:size-9 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:p-0 group-data-[collapsible=icon]:[&>span:last-child]:hidden [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n  {\n    variants: {\n      size: {\n        default: \"h-8 text-sm\",\n        lg: \"h-11 text-sm group-data-[collapsible=icon]:p-0\",\n        sm: \"h-7 text-xs\",\n      },\n      variant: {\n        default: \"hover:bg-accent hover:text-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_var(--border)] hover:bg-accent hover:text-accent-foreground hover:shadow-[0_0_0_1px_var(--accent)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      variant: \"default\",\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/variants.ts"
+    },
+    {
+      "path": "src/components/ui/sidebar/index.ts",
+      "content": "export { default as Sidebar } from \"./Sidebar.vue\"\nexport { default as SidebarContent } from \"./SidebarContent.vue\"\nexport { default as SidebarFooter } from \"./SidebarFooter.vue\"\nexport { default as SidebarGroup } from \"./SidebarGroup.vue\"\nexport { default as SidebarGroupAction } from \"./SidebarGroupAction.vue\"\nexport { default as SidebarGroupContent } from \"./SidebarGroupContent.vue\"\nexport { default as SidebarGroupLabel } from \"./SidebarGroupLabel.vue\"\nexport { default as SidebarHeader } from \"./SidebarHeader.vue\"\nexport { default as SidebarInput } from \"./SidebarInput.vue\"\nexport { default as SidebarInset } from \"./SidebarInset.vue\"\nexport { default as SidebarMenu } from \"./SidebarMenu.vue\"\nexport { default as SidebarMenuAction } from \"./SidebarMenuAction.vue\"\nexport { default as SidebarMenuBadge } from \"./SidebarMenuBadge.vue\"\nexport { default as SidebarMenuButton } from \"./SidebarMenuButton.vue\"\nexport { default as SidebarMenuButtonChild } from \"./SidebarMenuButtonChild.vue\"\nexport { default as SidebarMenuItem } from \"./SidebarMenuItem.vue\"\nexport { default as SidebarMenuSub } from \"./SidebarMenuSub.vue\"\nexport { default as SidebarMenuSubButton } from \"./SidebarMenuSubButton.vue\"\nexport { default as SidebarMenuSubItem } from \"./SidebarMenuSubItem.vue\"\nexport { default as SidebarProvider } from \"./SidebarProvider.vue\"\nexport { default as SidebarRail } from \"./SidebarRail.vue\"\nexport { default as SidebarSeparator } from \"./SidebarSeparator.vue\"\nexport { default as SidebarTrigger } from \"./SidebarTrigger.vue\"\nexport {\n  SIDEBAR_KEYBOARD_SHORTCUT,\n  SIDEBAR_STORAGE_KEY,\n  SIDEBAR_WIDTH,\n  SIDEBAR_WIDTH_ICON,\n  SIDEBAR_WIDTH_MOBILE,\n  useOptionalSidebar,\n  useSidebar,\n} from \"./context\"\nexport {\n  sidebarMenuButtonVariants,\n  type SidebarMenuButtonVariants,\n} from \"./variants\"\nexport type {\n  SidebarCollapsible,\n  SidebarProps,\n  SidebarSide,\n  SidebarState,\n  SidebarVariant,\n} from \"./types\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/sidebar/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/separator/Separator.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport type { SeparatorProps } from \"./types\"\n\nconst props = withDefaults(defineProps<SeparatorProps>(), {\n  decorative: true,\n  orientation: \"horizontal\",\n})\n\nconst separatorRole = computed(() => props.decorative ? undefined : \"separator\")\nconst ariaOrientation = computed(() =>\n  props.decorative ? undefined : props.orientation,\n)\n</script>\n\n<template>\n  <div\n    data-slot=\"separator\"\n    :data-orientation=\"props.orientation\"\n    :role=\"separatorRole\"\n    :aria-orientation=\"ariaOrientation\"\n    :class=\"\n      cn(\n        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',\n        props.class,\n      )\n    \"\n  />\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/separator/Separator.vue"
+    },
+    {
+      "path": "src/components/ui/separator/types.ts",
+      "content": "import type { HTMLAttributes } from \"vue\"\n\nexport type SeparatorOrientation = \"horizontal\" | \"vertical\"\n\nexport interface SeparatorProps {\n  class?: HTMLAttributes[\"class\"]\n  decorative?: boolean\n  orientation?: SeparatorOrientation\n}\n",
+      "type": "registry:ui",
+      "target": "components/ui/separator/types.ts"
+    },
+    {
+      "path": "src/components/ui/separator/index.ts",
+      "content": "export { default as Separator } from \"./Separator.vue\"\nexport type {\n  SeparatorOrientation,\n  SeparatorProps,\n} from \"./types\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/separator/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/skeleton.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "skeleton",
+  "title": "Skeleton",
+  "description": "A placeholder block for loading surfaces with shape variants, optional animation, and accessible status labeling.",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/skeleton/Skeleton.vue",
+      "content": "<script setup lang=\"ts\">\nimport { computed } from \"vue\"\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nexport type SkeletonVariant = \"block\" | \"text\" | \"circle\"\n\nexport interface SkeletonProps {\n  animated?: boolean\n  as?: string\n  class?: HTMLAttributes[\"class\"]\n  decorative?: boolean\n  label?: string\n  variant?: SkeletonVariant\n}\n\nconst props = withDefaults(defineProps<SkeletonProps>(), {\n  animated: true,\n  as: \"div\",\n  decorative: true,\n  label: \"Loading\",\n  variant: \"block\",\n})\n\nconst variantClass = computed(() => {\n  if (props.variant === \"circle\") return \"size-10 rounded-full\"\n  if (props.variant === \"text\") return \"h-4 w-full rounded\"\n\n  return \"h-24 w-full rounded-md\"\n})\n</script>\n\n<template>\n  <component\n    :is=\"props.as\"\n    data-slot=\"skeleton\"\n    :data-animated=\"props.animated ? 'true' : 'false'\"\n    :data-variant=\"props.variant\"\n    :aria-hidden=\"props.decorative ? 'true' : undefined\"\n    :aria-label=\"props.decorative ? undefined : props.label\"\n    :class=\"\n      cn(\n        'block shrink-0 bg-muted',\n        variantClass,\n        props.animated && 'animate-pulse',\n        props.class,\n      )\n    \"\n    :role=\"props.decorative ? undefined : 'status'\"\n  >\n    <span v-if=\"!props.decorative\" class=\"sr-only\">{{ props.label }}</span>\n  </component>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/skeleton/Skeleton.vue"
+    },
+    {
+      "path": "src/components/ui/skeleton/index.ts",
+      "content": "export { default as Skeleton } from \"./Skeleton.vue\"\nexport type {\n  SkeletonProps,\n  SkeletonVariant,\n} from \"./Skeleton.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/skeleton/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/sonner.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "sonner",
+  "title": "Sonner",
+  "description": "An opinionated toast component for Vue applications.",
+  "dependencies": [
+    "@lucide/vue",
+    "clsx",
+    "tailwind-merge",
+    "vue-sonner"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/sonner/Sonner.vue",
+      "content": "<script lang=\"ts\" setup>\nimport type { ToasterProps } from \"vue-sonner\"\nimport { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from \"@lucide/vue\"\nimport { Toaster as Sonner } from \"vue-sonner\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = withDefaults(defineProps<ToasterProps>(), {\n  closeButtonPosition: \"top-right\",\n})\n</script>\n\n<template>\n  <Sonner\n    :class=\"cn('toaster group', props.class)\"\n    :style=\"{\n      '--normal-bg': 'var(--popover)',\n      '--normal-text': 'var(--popover-foreground)',\n      '--normal-border': 'var(--border)',\n      '--border-radius': 'var(--radius)',\n    }\"\n    v-bind=\"props\"\n  >\n    <template #success-icon>\n      <CircleCheckIcon class=\"size-4\" />\n    </template>\n    <template #info-icon>\n      <InfoIcon class=\"size-4\" />\n    </template>\n    <template #warning-icon>\n      <TriangleAlertIcon class=\"size-4\" />\n    </template>\n    <template #error-icon>\n      <OctagonXIcon class=\"size-4\" />\n    </template>\n    <template #loading-icon>\n      <div>\n        <Loader2Icon class=\"size-4 animate-spin\" />\n      </div>\n    </template>\n    <template #close-icon>\n      <XIcon class=\"size-4\" />\n    </template>\n  </Sonner>\n</template>\n\n<style>\n[data-sonner-toaster] [data-close-button-position=\"top-right\"] {\n  --toast-close-button-right: 0.625rem;\n  --toast-close-button-top: 0.625rem;\n  --toast-close-button-transform: none;\n}\n\n[data-sonner-toast][data-styled=\"true\"]:has([data-close-button]) {\n  padding-right: 2.75rem;\n}\n\n[data-sonner-toast][data-styled=\"true\"] [data-close-button] {\n  background: transparent;\n  border-color: transparent;\n  border-radius: 0;\n  color: currentColor;\n}\n\n[data-sonner-toast][data-styled=\"true\"]:hover [data-close-button]:hover,\n[data-sonner-toaster][data-sonner-theme=\"dark\"] [data-sonner-toast] [data-close-button]:hover {\n  background: transparent;\n  border-color: transparent;\n}\n</style>\n",
+      "type": "registry:ui",
+      "target": "components/ui/sonner/Sonner.vue"
+    },
+    {
+      "path": "src/components/ui/sonner/index.ts",
+      "content": "export { default as Toaster } from \"./Sonner.vue\"\nexport {\n  toast,\n  useVueSonner,\n  type Action,\n  type ExternalToast,\n  type PromiseIExtendedResult,\n  type ToastClasses,\n  type ToastT,\n  type ToastToDismiss,\n  type ToasterProps,\n} from \"vue-sonner\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/sonner/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/spinner.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
+  "name": "spinner",
+  "title": "Spinner",
+  "description": "A compact loading indicator for buttons and status displays.",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/spinner/Spinner.vue",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = withDefaults(\n  defineProps<{\n    class?: HTMLAttributes[\"class\"]\n    label?: string\n    decorative?: boolean\n  }>(),\n  {\n    label: \"Loading\",\n    decorative: false,\n  },\n)\n</script>\n\n<template>\n  <span\n    data-slot=\"spinner\"\n    :aria-hidden=\"props.decorative ? 'true' : undefined\"\n    :aria-label=\"props.decorative ? undefined : props.label\"\n    :class=\"\n      cn(\n        'inline-block size-4 shrink-0 animate-spin rounded-full border-2 border-current border-r-transparent align-[-0.125em]',\n        props.class,\n      )\n    \"\n    :role=\"props.decorative ? undefined : 'status'\"\n  >\n    <span v-if=\"!props.decorative\" class=\"sr-only\">{{ props.label }}</span>\n  </span>\n</template>\n",
+      "type": "registry:ui",
+      "target": "components/ui/spinner/Spinner.vue"
+    },
+    {
+      "path": "src/components/ui/spinner/index.ts",
+      "content": "export { default as Spinner } from \"./Spinner.vue\"\n",
+      "type": "registry:ui",
+      "target": "components/ui/spinner/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"
+}