@publish.os/nextjs 0.0.1-alpha.2 → 0.0.1-alpha.4

package/dist/kernel/components/ui/scroll-area.cjs

@@ -0,0 +1,413 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/kernel/components/ui/scroll-area.tsx
+var scroll_area_exports = {};
+__export(scroll_area_exports, {
+  ScrollArea: () => ScrollArea,
+  ScrollAreaContent: () => ScrollAreaContent,
+  ScrollAreaCorner: () => ScrollAreaCorner,
+  ScrollAreaRoot: () => ScrollAreaRoot,
+  ScrollAreaScrollbar: () => ScrollAreaScrollbar,
+  ScrollAreaThumb: () => ScrollAreaThumb,
+  ScrollAreaViewport: () => ScrollAreaViewport,
+  scrollAreaVariants: () => scrollAreaVariants
+});
+module.exports = __toCommonJS(scroll_area_exports);
+var import_scroll_area = require("@base-ui/react/scroll-area");
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/kernel/components/ui/scroll-area.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var scrollAreaVariants = (0, import_class_variance_authority.cva)(
+  "relative overflow-hidden rounded-scrollarea text-foreground-1",
+  {
+    variants: {
+      variant: {
+        default: "",
+        gradient: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var DEFAULT_MASK_SIZE = 24;
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") {
+        ref(value);
+      } else {
+        ref.current = value;
+      }
+    }
+  };
+}
+function normalizeMaskConfig({
+  mask,
+  orientation,
+  variant
+}) {
+  if (mask === false) return null;
+  if (!mask && variant !== "gradient") return null;
+  const maskConfig = typeof mask === "object" ? mask : {};
+  const axis = maskConfig.axis ?? (orientation === "horizontal" ? "horizontal" : "vertical");
+  const size = maskConfig.size ?? (axis === "horizontal" ? maskConfig.width : maskConfig.height) ?? maskConfig.height ?? maskConfig.width ?? DEFAULT_MASK_SIZE;
+  return {
+    axis,
+    size,
+    triggerSize: maskConfig.triggerSize ?? size
+  };
+}
+function createMaskValue({
+  axis,
+  endSize,
+  startSize
+}) {
+  const direction = axis === "horizontal" ? "to right" : "to bottom";
+  return `linear-gradient(${direction}, transparent 0, black ${startSize}px, black calc(100% - ${endSize}px), transparent 100%)`;
+}
+function initialMaskStyle(mask) {
+  if (!mask) return {};
+  const maskValue = createMaskValue({
+    axis: mask.axis,
+    endSize: mask.size,
+    startSize: 0
+  });
+  return {
+    WebkitMaskImage: maskValue,
+    maskImage: maskValue
+  };
+}
+function isScrollAreaBlock(child) {
+  return (0, import_react.isValidElement)(child) && (child.type === ScrollAreaViewport || child.type === ScrollAreaContent || child.type === ScrollAreaScrollbar || child.type === ScrollAreaThumb || child.type === ScrollAreaCorner);
+}
+function hasScrollAreaBlocks(children) {
+  return import_react.Children.toArray(children).some(isScrollAreaBlock);
+}
+var ScrollAreaRoot = (0, import_react.forwardRef)(function ScrollAreaRoot2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_scroll_area.ScrollArea.Root,
+    {
+      className: cn("relative overflow-hidden", className),
+      ref,
+      ...props
+    }
+  );
+});
+function ScrollArea({
+  border = "none",
+  borderEndClassName,
+  borderStartClassName,
+  children,
+  className,
+  contentClassName,
+  contentProps,
+  corner,
+  cornerClassName,
+  cornerProps,
+  mask,
+  orientation = "vertical",
+  scrollbar = true,
+  scrollbarClassName,
+  scrollbarProps,
+  thumbClassName,
+  thumbProps,
+  variant,
+  viewportClassName,
+  viewportProps,
+  viewportRef,
+  ...props
+}) {
+  const internalViewportRef = (0, import_react.useRef)(null);
+  const [showStartBorder, setShowStartBorder] = (0, import_react.useState)(false);
+  const [showEndBorder, setShowEndBorder] = (0, import_react.useState)(false);
+  const maskConfig = typeof mask === "object" ? mask : void 0;
+  const maskFallback = typeof mask === "object" ? true : mask;
+  const hasMaskConfig = maskConfig !== void 0;
+  const maskAxis = maskConfig?.axis;
+  const maskHeight = maskConfig?.height;
+  const maskSize = maskConfig?.size;
+  const maskTriggerSize = maskConfig?.triggerSize;
+  const maskWidth = maskConfig?.width;
+  const normalizedMask = (0, import_react.useMemo)(
+    () => normalizeMaskConfig({
+      mask: hasMaskConfig ? {
+        axis: maskAxis,
+        height: maskHeight,
+        size: maskSize,
+        triggerSize: maskTriggerSize,
+        width: maskWidth
+      } : maskFallback,
+      orientation,
+      variant
+    }),
+    [
+      hasMaskConfig,
+      maskAxis,
+      maskHeight,
+      maskSize,
+      maskTriggerSize,
+      maskWidth,
+      maskFallback,
+      orientation,
+      variant
+    ]
+  );
+  const viewportStyle = (0, import_react.useMemo)(
+    () => ({
+      ...initialMaskStyle(normalizedMask),
+      ...viewportProps?.style
+    }),
+    [normalizedMask, viewportProps?.style]
+  );
+  const setViewportRef = (0, import_react.useMemo)(
+    () => mergeRefs(internalViewportRef, viewportRef),
+    [viewportRef]
+  );
+  (0, import_react.useEffect)(() => {
+    const viewport = internalViewportRef.current;
+    if (!viewport || !normalizedMask && border === "none") {
+      return;
+    }
+    const updateScrollState = () => {
+      const scrollAxis = normalizedMask?.axis ?? (orientation === "horizontal" ? "horizontal" : "vertical");
+      const isHorizontal = scrollAxis === "horizontal";
+      const scrollOffset = isHorizontal ? viewport.scrollLeft : viewport.scrollTop;
+      const scrollSize = isHorizontal ? viewport.scrollWidth : viewport.scrollHeight;
+      const clientSize = isHorizontal ? viewport.clientWidth : viewport.clientHeight;
+      const maxScroll = Math.max(0, scrollSize - clientSize);
+      const hasOverflow = maxScroll > 1;
+      const showStart = hasOverflow && scrollOffset > 1;
+      const showEnd = hasOverflow && scrollOffset < maxScroll - 1;
+      setShowStartBorder(showStart);
+      setShowEndBorder(showEnd);
+      if (!normalizedMask) return;
+      if (!hasOverflow) {
+        viewport.style.removeProperty("mask-image");
+        viewport.style.removeProperty("-webkit-mask-image");
+        return;
+      }
+      const startSize = Math.min(
+        normalizedMask.size,
+        scrollOffset / normalizedMask.triggerSize * normalizedMask.size
+      );
+      const remainingScroll = maxScroll - scrollOffset;
+      const endSize = Math.min(
+        normalizedMask.size,
+        remainingScroll / normalizedMask.triggerSize * normalizedMask.size
+      );
+      const maskValue = createMaskValue({
+        axis: normalizedMask.axis,
+        endSize,
+        startSize
+      });
+      viewport.style.setProperty("mask-image", maskValue);
+      viewport.style.setProperty("-webkit-mask-image", maskValue);
+    };
+    const resizeObserver = new ResizeObserver(updateScrollState);
+    resizeObserver.observe(viewport);
+    viewport.addEventListener("scroll", updateScrollState, { passive: true });
+    updateScrollState();
+    return () => {
+      resizeObserver.disconnect();
+      viewport.removeEventListener("scroll", updateScrollState);
+    };
+  }, [border, normalizedMask, orientation]);
+  if (hasScrollAreaBlocks(children)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ScrollAreaRoot,
+      {
+        className: cn(scrollAreaVariants({ variant }), className),
+        ...props,
+        children
+      }
+    );
+  }
+  const showVerticalScrollbar = scrollbar && orientation !== "horizontal";
+  const showHorizontalScrollbar = scrollbar && orientation !== "vertical";
+  const showCorner = corner ?? orientation === "both";
+  const defaultStartBorderClassName = orientation === "horizontal" ? "border-l-stroke-2" : "border-t-stroke-2";
+  const defaultEndBorderClassName = orientation === "horizontal" ? "border-r-stroke-2" : "border-b-stroke-2";
+  const scrollBorderClassName = orientation === "horizontal" ? cn(
+    border !== "none" && "border-x border-x-transparent transition-colors",
+    (border === "start" || border === "both") && showStartBorder && (borderStartClassName ?? defaultStartBorderClassName),
+    (border === "end" || border === "both") && showEndBorder && (borderEndClassName ?? defaultEndBorderClassName)
+  ) : cn(
+    border !== "none" && "border-y border-y-transparent transition-colors",
+    (border === "start" || border === "both") && showStartBorder && (borderStartClassName ?? defaultStartBorderClassName),
+    (border === "end" || border === "both") && showEndBorder && (borderEndClassName ?? defaultEndBorderClassName)
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    ScrollAreaRoot,
+    {
+      className: cn(
+        scrollAreaVariants({ variant }),
+        scrollBorderClassName,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ScrollAreaViewport,
+          {
+            ...viewportProps,
+            className: cn(viewportClassName, viewportProps?.className),
+            ref: setViewportRef,
+            style: viewportStyle,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              ScrollAreaContent,
+              {
+                ...contentProps,
+                className: cn(contentClassName, contentProps?.className),
+                children
+              }
+            )
+          }
+        ),
+        showVerticalScrollbar ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ScrollAreaScrollbar,
+          {
+            ...scrollbarProps,
+            className: cn(scrollbarClassName, scrollbarProps?.className),
+            orientation: "vertical",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              ScrollAreaThumb,
+              {
+                ...thumbProps,
+                className: cn(thumbClassName, thumbProps?.className)
+              }
+            )
+          }
+        ) : null,
+        showHorizontalScrollbar ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ScrollAreaScrollbar,
+          {
+            ...scrollbarProps,
+            className: cn(scrollbarClassName, scrollbarProps?.className),
+            orientation: "horizontal",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              ScrollAreaThumb,
+              {
+                ...thumbProps,
+                className: cn(thumbClassName, thumbProps?.className)
+              }
+            )
+          }
+        ) : null,
+        showCorner ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          ScrollAreaCorner,
+          {
+            ...cornerProps,
+            className: cn(cornerClassName, cornerProps?.className)
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var ScrollAreaViewport = (0, import_react.forwardRef)(function ScrollAreaViewport2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_scroll_area.ScrollArea.Viewport,
+    {
+      className: cn("size-full rounded-[inherit]", className),
+      ref,
+      ...props
+    }
+  );
+});
+var ScrollAreaContent = (0, import_react.forwardRef)(function ScrollAreaContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_scroll_area.ScrollArea.Content, { className: cn(className), ref, ...props });
+});
+var ScrollAreaScrollbar = (0, import_react.forwardRef)(function ScrollAreaScrollbar2({ className, orientation = "vertical", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_scroll_area.ScrollArea.Scrollbar,
+    {
+      className: cn(
+        "flex touch-none select-none bg-transparent p-0.5 transition-colors",
+        orientation === "vertical" ? "h-full w-2.5" : "h-2.5 w-full",
+        className
+      ),
+      orientation,
+      ref,
+      ...props
+    }
+  );
+});
+var ScrollAreaThumb = (0, import_react.forwardRef)(function ScrollAreaThumb2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_scroll_area.ScrollArea.Thumb,
+    {
+      className: cn(
+        "flex-1 rounded-scrollbar-thumb bg-stroke-2 transition-colors hover:bg-stroke-1",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+var ScrollAreaCorner = (0, import_react.forwardRef)(function ScrollAreaCorner2({ className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_scroll_area.ScrollArea.Corner,
+    {
+      className: cn("bg-transparent", className),
+      ref,
+      ...props
+    }
+  );
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ScrollArea,
+  ScrollAreaContent,
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+  scrollAreaVariants
+});

package/dist/kernel/components/ui/scroll-area.d.cts

@@ -0,0 +1,58 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode, Ref, ComponentRef } from 'react';
+import * as _base_ui_react from '@base-ui/react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
+import { VariantProps } from 'class-variance-authority';
+
+declare const scrollAreaVariants: (props?: ({
+    variant?: "default" | "gradient" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ScrollAreaVariantProps = VariantProps<typeof scrollAreaVariants>;
+type ScrollAreaRootProps = ComponentPropsWithoutRef<typeof ScrollArea$1.Root>;
+type ScrollAreaViewportProps = ComponentPropsWithoutRef<typeof ScrollArea$1.Viewport>;
+type ScrollAreaContentProps = ComponentPropsWithoutRef<typeof ScrollArea$1.Content>;
+type ScrollAreaScrollbarProps = ComponentPropsWithoutRef<typeof ScrollArea$1.Scrollbar>;
+type ScrollAreaThumbProps = ComponentPropsWithoutRef<typeof ScrollArea$1.Thumb>;
+type ScrollAreaCornerProps = ComponentPropsWithoutRef<typeof ScrollArea$1.Corner>;
+type ScrollAreaOrientation = "both" | "horizontal" | "vertical";
+type ScrollAreaMaskAxis = "horizontal" | "vertical";
+type ScrollAreaMaskConfig = {
+    axis?: ScrollAreaMaskAxis;
+    height?: number;
+    size?: number;
+    triggerSize?: number;
+    width?: number;
+};
+type ScrollAreaBorder = "both" | "end" | "none" | "start";
+type ScrollAreaProps = ScrollAreaRootProps & ScrollAreaVariantProps & {
+    border?: ScrollAreaBorder;
+    borderEndClassName?: string;
+    borderStartClassName?: string;
+    children?: ReactNode;
+    contentClassName?: string;
+    contentProps?: ScrollAreaContentProps;
+    corner?: boolean;
+    cornerClassName?: string;
+    cornerProps?: ScrollAreaCornerProps;
+    mask?: boolean | ScrollAreaMaskConfig;
+    orientation?: ScrollAreaOrientation;
+    scrollbar?: boolean;
+    scrollbarClassName?: string;
+    scrollbarProps?: Omit<ScrollAreaScrollbarProps, "orientation">;
+    thumbClassName?: string;
+    thumbProps?: ScrollAreaThumbProps;
+    viewportClassName?: string;
+    viewportProps?: ScrollAreaViewportProps;
+    viewportRef?: Ref<ComponentRef<typeof ScrollArea$1.Viewport>>;
+};
+declare const ScrollAreaRoot: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ScrollAreaRootProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare function ScrollArea({ border, borderEndClassName, borderStartClassName, children, className, contentClassName, contentProps, corner, cornerClassName, cornerProps, mask, orientation, scrollbar, scrollbarClassName, scrollbarProps, thumbClassName, thumbProps, variant, viewportClassName, viewportProps, viewportRef, ...props }: ScrollAreaProps): react_jsx_runtime.JSX.Element;
+declare const ScrollAreaViewport: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ScrollAreaViewportProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaContent: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ScrollAreaContentProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaScrollbar: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ScrollAreaScrollbarProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaThumb: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ScrollAreaThumbProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaCorner: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ScrollAreaCornerProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+export { ScrollArea, type ScrollAreaBorder, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaMaskAxis, type ScrollAreaMaskConfig, type ScrollAreaOrientation, type ScrollAreaProps, ScrollAreaRoot, type ScrollAreaRootProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, type ScrollAreaVariantProps, ScrollAreaViewport, type ScrollAreaViewportProps, scrollAreaVariants };

package/dist/kernel/components/ui/scroll-area.d.ts

@@ -0,0 +1,58 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode, Ref, ComponentRef } from 'react';
+import * as _base_ui_react from '@base-ui/react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
+import { VariantProps } from 'class-variance-authority';
+
+declare const scrollAreaVariants: (props?: ({
+    variant?: "default" | "gradient" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ScrollAreaVariantProps = VariantProps<typeof scrollAreaVariants>;
+type ScrollAreaRootProps = ComponentPropsWithoutRef<typeof ScrollArea$1.Root>;
+type ScrollAreaViewportProps = ComponentPropsWithoutRef<typeof ScrollArea$1.Viewport>;
+type ScrollAreaContentProps = ComponentPropsWithoutRef<typeof ScrollArea$1.Content>;
+type ScrollAreaScrollbarProps = ComponentPropsWithoutRef<typeof ScrollArea$1.Scrollbar>;
+type ScrollAreaThumbProps = ComponentPropsWithoutRef<typeof ScrollArea$1.Thumb>;
+type ScrollAreaCornerProps = ComponentPropsWithoutRef<typeof ScrollArea$1.Corner>;
+type ScrollAreaOrientation = "both" | "horizontal" | "vertical";
+type ScrollAreaMaskAxis = "horizontal" | "vertical";
+type ScrollAreaMaskConfig = {
+    axis?: ScrollAreaMaskAxis;
+    height?: number;
+    size?: number;
+    triggerSize?: number;
+    width?: number;
+};
+type ScrollAreaBorder = "both" | "end" | "none" | "start";
+type ScrollAreaProps = ScrollAreaRootProps & ScrollAreaVariantProps & {
+    border?: ScrollAreaBorder;
+    borderEndClassName?: string;
+    borderStartClassName?: string;
+    children?: ReactNode;
+    contentClassName?: string;
+    contentProps?: ScrollAreaContentProps;
+    corner?: boolean;
+    cornerClassName?: string;
+    cornerProps?: ScrollAreaCornerProps;
+    mask?: boolean | ScrollAreaMaskConfig;
+    orientation?: ScrollAreaOrientation;
+    scrollbar?: boolean;
+    scrollbarClassName?: string;
+    scrollbarProps?: Omit<ScrollAreaScrollbarProps, "orientation">;
+    thumbClassName?: string;
+    thumbProps?: ScrollAreaThumbProps;
+    viewportClassName?: string;
+    viewportProps?: ScrollAreaViewportProps;
+    viewportRef?: Ref<ComponentRef<typeof ScrollArea$1.Viewport>>;
+};
+declare const ScrollAreaRoot: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ScrollAreaRootProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare function ScrollArea({ border, borderEndClassName, borderStartClassName, children, className, contentClassName, contentProps, corner, cornerClassName, cornerProps, mask, orientation, scrollbar, scrollbarClassName, scrollbarProps, thumbClassName, thumbProps, variant, viewportClassName, viewportProps, viewportRef, ...props }: ScrollAreaProps): react_jsx_runtime.JSX.Element;
+declare const ScrollAreaViewport: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ScrollAreaViewportProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaContent: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ScrollAreaContentProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaScrollbar: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ScrollAreaScrollbarProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaThumb: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ScrollAreaThumbProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const ScrollAreaCorner: react.ForwardRefExoticComponent<Omit<Omit<_base_ui_react.ScrollAreaCornerProps, "ref"> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+export { ScrollArea, type ScrollAreaBorder, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaMaskAxis, type ScrollAreaMaskConfig, type ScrollAreaOrientation, type ScrollAreaProps, ScrollAreaRoot, type ScrollAreaRootProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, type ScrollAreaVariantProps, ScrollAreaViewport, type ScrollAreaViewportProps, scrollAreaVariants };