{
  "name": "scroll-area",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "name": "ScrollArea.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'radix-vue'\nimport ScrollBar from './ScrollBar.vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(\n  defineProps<\n    ScrollAreaRootProps & { class?: string }\n  >(),\n  {\n    class: '',\n    orientation: 'vertical',\n  },\n)\n</script>\n\n<template>\n  <ScrollAreaRoot :type=\"type\" :class=\"cn('relative overflow-hidden', props.class)\">\n    <ScrollAreaViewport class=\"h-full w-full  rounded-[inherit]\">\n      <slot />\n    </ScrollAreaViewport>\n    <ScrollBar />\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n</template>\n"
    },
    {
      "name": "ScrollBar.vue",
      "content": "<script setup lang=\"ts\">\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = withDefaults(defineProps<ScrollAreaScrollbarProps>(), {\n  orientation: 'vertical',\n})\n</script>\n\n<template>\n  <ScrollAreaScrollbar\n    v-bind=\"props\"\n    :class=\"\n      cn('flex touch-none select-none transition-colors',\n         orientation === 'vertical'\n           && 'h-full w-2.5 border-l border-l-transparent p-[1px]',\n         orientation === 'horizontal'\n           && 'h-2.5 border-t border-t-transparent p-[1px]',\n         $attrs.class ?? '')\"\n  >\n    <ScrollAreaThumb class=\"relative flex-1 rounded-full bg-border\" />\n  </ScrollAreaScrollbar>\n</template>\n"
    },
    {
      "name": "index.ts",
      "content": "export { default as ScrollArea } from './ScrollArea.vue'\nexport { default as ScrollBar } from './ScrollBar.vue'\n"
    }
  ],
  "type": "components:ui"
}