@mijn-ui/react-scroll-area/dist/index.js

A custom scrollable container for overflowing content.

"use client";

// src/scroll-area.tsx
import { createTVUnstyledSlots } from "@mijn-ui/react-core";
import { useTVUnstyled } from "@mijn-ui/react-hooks";
import {
  cn,
  scrollAreaStyles
} from "@mijn-ui/react-theme";
import { createContext } from "@mijn-ui/react-utilities";
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
import { jsx, jsxs } from "react/jsx-runtime";
var [ScrollAreaProvider, useScrollAreaContext] = createContext({
  name: "ScrollAreaContext",
  strict: true,
  errorMessage: "useScrollAreaContext: `context` is undefined. Seems you forgot to wrap component within <ScrollArea />"
});
var useScrollAreaStyles = (unstyledOverride) => {
  const context = useScrollAreaContext();
  const unstyledSlots = useTVUnstyled(context, unstyledOverride);
  return { ...unstyledSlots, classNames: context.classNames };
};
var ScrollArea = ({
  unstyled,
  classNames,
  className,
  children,
  ...props
}) => {
  const styles = scrollAreaStyles();
  const { base, viewport } = createTVUnstyledSlots(styles, unstyled);
  return /* @__PURE__ */ jsx(ScrollAreaProvider, { value: { unstyled, styles }, children: /* @__PURE__ */ jsxs(
    ScrollAreaPrimitive.Root,
    {
      className: base({ className: cn(classNames?.base, className) }),
      ...props,
      children: [
        /* @__PURE__ */ jsx(
          ScrollAreaPrimitive.Viewport,
          {
            className: viewport({ className: classNames?.viewport }),
            children
          }
        ),
        /* @__PURE__ */ jsx(ScrollBar, {}),
        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
      ]
    }
  ) });
};
var ScrollBar = ({
  unstyled,
  className,
  orientation = "vertical",
  ...props
}) => {
  const { scrollbar, scrollThumb, classNames } = useScrollAreaStyles(unstyled);
  return /* @__PURE__ */ jsx(
    ScrollAreaPrimitive.ScrollAreaScrollbar,
    {
      orientation,
      className: scrollbar({
        orientation,
        className: cn(classNames?.scrollbar, className)
      }),
      ...props,
      children: /* @__PURE__ */ jsx(
        ScrollAreaPrimitive.ScrollAreaThumb,
        {
          className: scrollThumb({ className: classNames?.scrollThumb })
        }
      )
    }
  );
};
export {
  ScrollArea,
  ScrollBar,
  useScrollAreaStyles
};