{
  "files": [
    {
      "content": "defmodule Shadix.Components.ScrollArea do\n  @moduledoc \"\"\"\n  Scroll area component, translated from the shadcn/ui (new-york-v4) scroll-area.\n\n  NOTE: the React/Radix original replaces the browser's native scrollbar with a\n  custom overlay scrollbar (the `ScrollBar`/`ScrollAreaThumb` primitives) driven\n  by JavaScript. This v1 is intentionally CSS-only: it keeps the native scroll\n  behaviour and merely *styles the native scrollbars* (thin width, rounded\n  `bg-border` thumb) via `scrollbar-width` and the `::-webkit-scrollbar`\n  pseudo-elements. There is no Radix-style custom-scrollbar JS and therefore no\n  LiveView hook.\n\n  The outer `scroll-area` wrapper clips overflow; the inner\n  `scroll-area-viewport` is the scrollable element and receives the caller's\n  content. Give the wrapper a constrained size (e.g. `class=\"h-72 w-48\"`) so\n  there is something to scroll.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @doc \"\"\"\n  Renders a scroll area with styled native scrollbars.\n\n  The caller's `:class` is applied to the outer wrapper (typically to size it),\n  while the inner viewport handles the actual scrolling.\n  \"\"\"\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n  slot(:inner_block, required: true)\n\n  def scroll_area(assigns) do\n    ~H\"\"\"\n    <div data-slot=\"scroll-area\" class={cn([\"relative overflow-hidden\", @class])} {@rest}>\n      <div\n        data-slot=\"scroll-area-viewport\"\n        tabindex=\"0\"\n        class={\n          cn([\n            \"size-full overflow-auto rounded-[inherit]\",\n            \"outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\",\n            \"[scrollbar-width:thin] [scrollbar-color:var(--border)_transparent]\",\n            \"[&::-webkit-scrollbar]:w-2.5 [&::-webkit-scrollbar]:h-2.5\",\n            \"[&::-webkit-scrollbar-track]:bg-transparent\",\n            \"[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border\"\n          ])\n        }\n      >\n        {render_slot(@inner_block)}\n      </div>\n    </div>\n    \"\"\"\n  end\nend\n",
      "path": "scroll_area.ex"
    }
  ],
  "hooks": [],
  "name": "scroll_area",
  "npm_deps": [],
  "registry_deps": [
    "cn"
  ]
}