{
  "name": "scroll-area",
  "title": "Scroll Area",
  "description": "Kura Scroll Area component source.",
  "type": "ui",
  "add": "when-added",
  "files": [
    {
      "type": "ui",
      "role": "file",
      "content": "import Scrollbar from './scroll-area-scrollbar.svelte';\nimport Root from './scroll-area.svelte';\n\nexport {\n  Root,\n  Scrollbar,\n  //,\n  Root as ScrollArea,\n  Scrollbar as ScrollAreaScrollbar\n};\n",
      "path": "scroll-area/index.ts",
      "_imports_": [
        {
          "import": "./scroll-area-scrollbar.svelte",
          "item": "scroll-area",
          "file": {
            "type": "ui",
            "path": "scroll-area/scroll-area-scrollbar.svelte"
          },
          "meta": {}
        },
        {
          "import": "./scroll-area.svelte",
          "item": "scroll-area",
          "file": {
            "type": "ui",
            "path": "scroll-area/scroll-area.svelte"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';\n  import { cn, type WithoutChild } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    orientation = 'vertical',\n    children,\n    ...restProps\n  }: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();\n</script>\n\n<ScrollAreaPrimitive.Scrollbar\n  bind:ref\n  data-slot=\"scroll-area-scrollbar\"\n  data-orientation={orientation}\n  {orientation}\n  class={cn(\n    'flex touch-none bg-popover p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-[var(--border)] data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-[var(--border)]',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n  <ScrollAreaPrimitive.Thumb\n    data-slot=\"scroll-area-thumb\"\n    class=\"relative flex-1 rounded-none bg-muted-foreground/50 hover:bg-primary\"\n  />\n</ScrollAreaPrimitive.Scrollbar>\n",
      "path": "scroll-area/scroll-area-scrollbar.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';\n  import { Scrollbar } from './index.js';\n  import { cn, type WithoutChild } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    viewportRef = $bindable(null),\n    class: className,\n    orientation = 'vertical',\n    scrollbarXClasses = '',\n    scrollbarYClasses = '',\n    children,\n    ...restProps\n  }: WithoutChild<ScrollAreaPrimitive.RootProps> & {\n    orientation?: 'vertical' | 'horizontal' | 'both' | undefined;\n    scrollbarXClasses?: string | undefined;\n    scrollbarYClasses?: string | undefined;\n    viewportRef?: HTMLElement | null;\n  } = $props();\n</script>\n\n<ScrollAreaPrimitive.Root\n  bind:ref\n  data-slot=\"scroll-area\"\n  class={cn('relative [--scrollbar-track:var(--background)]', className)}\n  {...restProps}\n>\n  <ScrollAreaPrimitive.Viewport\n    bind:ref={viewportRef}\n    data-slot=\"scroll-area-viewport\"\n    class=\"cn-scroll-area-viewport size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:ring-1 focus-visible:ring-ring/60 focus-visible:outline-1\"\n  >\n    {@render children?.()}\n  </ScrollAreaPrimitive.Viewport>\n  {#if orientation === 'vertical' || orientation === 'both'}\n    <Scrollbar orientation=\"vertical\" class={scrollbarYClasses} />\n  {/if}\n  {#if orientation === 'horizontal' || orientation === 'both'}\n    <Scrollbar orientation=\"horizontal\" class={scrollbarXClasses} />\n  {/if}\n  <ScrollAreaPrimitive.Corner />\n</ScrollAreaPrimitive.Root>\n",
      "path": "scroll-area/scroll-area.svelte",
      "_imports_": [
        {
          "import": "./index.js",
          "item": "scroll-area",
          "file": {
            "type": "ui",
            "path": "scroll-area/index.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    }
  ],
  "registryDependencies": [
    "styles",
    "utils"
  ],
  "dependencies": [
    {
      "ecosystem": "js",
      "name": "bits-ui",
      "version": "^2.18.1"
    }
  ],
  "devDependencies": []
}