{
  "name": "scroll-area",
  "type": "registry:ui",
  "dependencies": [
    "@vueuse/core",
    "reka-ui"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "ui/scroll-area/ScrollArea.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { ScrollAreaRootProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  ScrollAreaViewport,\n} from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\nimport ScrollBar from \"./ScrollBar.vue\"\n\nconst props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes[\"class\"] }>()\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n</script>\n\n<template>\n  <ScrollAreaRoot\n    data-slot=\"scroll-area\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('cn-scroll-area relative', props.class)\"\n  >\n    <ScrollAreaViewport\n      data-slot=\"scroll-area-viewport\"\n      class=\"cn-scroll-area-viewport size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1\"\n    >\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n"
    },
    {
      "path": "ui/scroll-area/ScrollBar.vue",
      "type": "registry:ui",
      "content": "<script setup lang=\"ts\">\nimport type { ScrollAreaScrollbarProps } from \"reka-ui\"\nimport type { HTMLAttributes } from \"vue\"\nimport { reactiveOmit } from \"@vueuse/core\"\nimport { ScrollAreaScrollbar, ScrollAreaThumb } from \"reka-ui\"\nimport { cn } from \"@/lib/utils\"\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes[\"class\"] }>(), {\n  orientation: \"vertical\",\n})\n\nconst delegatedProps = reactiveOmit(props, \"class\")\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    data-slot=\"scroll-area-scrollbar\"\n    :data-orientation=\"orientation\"\n    v-bind=\"delegatedProps\"\n    :class=\"cn('cn-scroll-area-scrollbar flex touch-none p-px transition-colors select-none', props.class)\"\n  >\n    <ScrollAreaThumb\n      data-slot=\"scroll-area-thumb\"\n      class=\"cn-scroll-area-thumb relative flex-1 bg-border\"\n    />\n  </ScrollAreaScrollbar>\n</template>\n"
    },
    {
      "path": "ui/scroll-area/index.ts",
      "type": "registry:ui",
      "content": "export { default as ScrollArea } from \"./ScrollArea.vue\"\nexport { default as ScrollBar } from \"./ScrollBar.vue\"\n"
    }
  ]
}