import { jsxs, jsx } from "react/jsx-runtime";
import * as React from "react";
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
import { cn } from "../../lib/utils.js";
const ScrollArea = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
  ScrollAreaPrimitive.Root,
  {
    ref,
    className: cn("relative flex flex-col overflow-hidden", className),
    ...props,
    children: [
      /* @__PURE__ */ jsx(
        ScrollAreaPrimitive.Viewport,
        {
          tabIndex: 0,
          className: "flex-1 min-h-0 w-full rounded-[inherit] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-primary",
          children
        }
      ),
      /* @__PURE__ */ jsx(ScrollBar, {}),
      /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
    ]
  }
));
ScrollArea.displayName = "ScrollArea";
const ScrollBar = React.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx(
  ScrollAreaPrimitive.ScrollAreaScrollbar,
  {
    ref,
    orientation,
    className: cn(
      "flex touch-none select-none transition-colors",
      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
      className
    ),
    ...props,
    children: /* @__PURE__ */ jsx(
      ScrollAreaPrimitive.ScrollAreaThumb,
      {
        className: cn("relative flex-1 rounded-full bg-[var(--scrollbar-thumb)] hover:bg-[var(--scrollbar-thumb-hover)] transition-colors")
      }
    )
  }
));
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
const scrollAreaMeta = {
  component: "ScrollArea",
  family: null,
  // non-family composite / overlay / layout
  variants: {},
  sizes: {},
  states: ["default"],
  tokens: {
    bg: [],
    fg: [],
    ring: []
  }
};
export {
  ScrollArea,
  ScrollBar,
  scrollAreaMeta
};
//# sourceMappingURL=scroll-area.js.map
