✨ feat(scroll-area): introduce ScrollArea component with customizable scrollbars and gradient fade

- Added `ScrollArea` component along with its subcomponents: `ScrollAreaRoot`, `ScrollAreaViewport`, `ScrollAreaContent`, `ScrollAreaScrollbar`, `ScrollAreaThumb`, and `ScrollAreaCorner`.
- Implemented styles for the ScrollArea to support custom scrollbars and gradient scroll fade effects.
- Created documentation and demos showcasing the usage of the ScrollArea component.
- Defined types for props to enhance type safety and usability.

This update enhances the layout capabilities of the UI library by providing a flexible and visually appealing scroll container.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

src/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { type FC } from 'react';
+
+import {
+  ScrollAreaContent,
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from './atoms';
+import type { ScrollAreaProps } from './type';
+
+const ScrollArea: FC<ScrollAreaProps> = ({
+  children,
+  contentProps,
+  corner = false,
+  cornerProps,
+  scrollFade = false,
+  scrollbarProps,
+  thumbProps,
+  viewportProps,
+  ...rest
+}) => {
+  return (
+    <ScrollAreaRoot {...rest}>
+      <ScrollAreaViewport scrollFade={scrollFade} {...viewportProps}>
+        <ScrollAreaContent {...contentProps}>{children}</ScrollAreaContent>
+      </ScrollAreaViewport>
+      <ScrollAreaScrollbar {...scrollbarProps}>
+        <ScrollAreaThumb {...thumbProps} />
+      </ScrollAreaScrollbar>
+      {corner && <ScrollAreaCorner {...cornerProps} />}
+    </ScrollAreaRoot>
+  );
+};
+
+ScrollArea.displayName = 'ScrollArea';
+
+export default ScrollArea;

src/ScrollArea/atoms.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
+import { cx } from 'antd-style';
+import type React from 'react';
+
+import { styles } from './style';
+
+const mergeStateClassName = <TState,>(
+  base: string,
+  className: string | ((state: TState) => string | undefined) | undefined,
+) => {
+  if (typeof className === 'function') return (state: TState) => cx(base, className(state));
+  return cx(base, className);
+};
+
+export type ScrollAreaRootProps = React.ComponentProps<typeof BaseScrollArea.Root>;
+export type ScrollAreaViewportProps = React.ComponentProps<typeof BaseScrollArea.Viewport> & {
+  /**
+   * Enable gradient scroll fade on the viewport edges.
+   * @default false
+   */
+  scrollFade?: boolean;
+};
+export type ScrollAreaContentProps = React.ComponentProps<typeof BaseScrollArea.Content>;
+export type ScrollAreaScrollbarProps = React.ComponentProps<typeof BaseScrollArea.Scrollbar>;
+export type ScrollAreaThumbProps = React.ComponentProps<typeof BaseScrollArea.Thumb>;
+export type ScrollAreaCornerProps = React.ComponentProps<typeof BaseScrollArea.Corner>;
+
+export const ScrollAreaRoot = ({ className, ...rest }: ScrollAreaRootProps) => {
+  return (
+    <BaseScrollArea.Root {...rest} className={mergeStateClassName(styles.root, className) as any} />
+  );
+};
+
+ScrollAreaRoot.displayName = 'ScrollAreaRoot';
+
+export const ScrollAreaViewport = ({
+  className,
+  scrollFade = false,
+  ...rest
+}: ScrollAreaViewportProps) => {
+  return (
+    <BaseScrollArea.Viewport
+      {...rest}
+      className={
+        mergeStateClassName(
+          cx(styles.viewport, scrollFade && styles.viewportFade),
+          className,
+        ) as any
+      }
+    />
+  );
+};
+
+ScrollAreaViewport.displayName = 'ScrollAreaViewport';
+
+export const ScrollAreaContent = ({ className, ...rest }: ScrollAreaContentProps) => {
+  return (
+    <BaseScrollArea.Content
+      {...rest}
+      className={mergeStateClassName(styles.content, className) as any}
+    />
+  );
+};
+
+ScrollAreaContent.displayName = 'ScrollAreaContent';
+
+export const ScrollAreaScrollbar = ({ className, ...rest }: ScrollAreaScrollbarProps) => {
+  return (
+    <BaseScrollArea.Scrollbar
+      {...rest}
+      className={mergeStateClassName(styles.scrollbar, className) as any}
+    />
+  );
+};
+
+ScrollAreaScrollbar.displayName = 'ScrollAreaScrollbar';
+
+export const ScrollAreaThumb = ({ className, ...rest }: ScrollAreaThumbProps) => {
+  return (
+    <BaseScrollArea.Thumb
+      {...rest}
+      className={mergeStateClassName(styles.thumb, className) as any}
+    />
+  );
+};
+
+ScrollAreaThumb.displayName = 'ScrollAreaThumb';
+
+export const ScrollAreaCorner = ({ className, ...rest }: ScrollAreaCornerProps) => {
+  return (
+    <BaseScrollArea.Corner
+      {...rest}
+      className={mergeStateClassName(styles.corner, className) as any}
+    />
+  );
+};
+
+ScrollAreaCorner.displayName = 'ScrollAreaCorner';

src/ScrollArea/demos/both.tsx

@@ -0,0 +1,63 @@
+import {
+  ScrollAreaContent,
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  ScrollAreaScrollbar,
+  ScrollAreaThumb,
+  ScrollAreaViewport,
+} from '@lobehub/ui';
+
+const items = Array.from({ length: 100 }, (_, index) => index + 1);
+
+export default () => {
+  return (
+    <ScrollAreaRoot
+      style={{
+        height: 320,
+        maxWidth: 'calc(100vw - 8rem)',
+        width: '100%',
+      }}
+    >
+      <ScrollAreaViewport>
+        <ScrollAreaContent style={{ padding: 20 }}>
+          <ul
+            style={{
+              display: 'grid',
+              gap: 12,
+              gridTemplateColumns: 'repeat(10, 6.25rem)',
+              gridTemplateRows: 'repeat(10, 6.25rem)',
+              listStyle: 'none',
+              margin: 0,
+              padding: 0,
+            }}
+          >
+            {items.map((item) => (
+              <li
+                key={item}
+                style={{
+                  alignItems: 'center',
+                  background: 'var(--lobe-color-fill-tertiary)',
+                  borderRadius: 8,
+                  color: 'var(--lobe-color-text-secondary)',
+                  display: 'flex',
+                  fontSize: 14,
+                  fontWeight: 500,
+                  justifyContent: 'center',
+                }}
+              >
+                {item}
+              </li>
+            ))}
+          </ul>
+        </ScrollAreaContent>
+      </ScrollAreaViewport>
+      <ScrollAreaScrollbar>
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+      <ScrollAreaScrollbar orientation="horizontal">
+        <ScrollAreaThumb />
+      </ScrollAreaScrollbar>
+      <ScrollAreaCorner />
+    </ScrollAreaRoot>
+  );
+};

src/ScrollArea/demos/index.tsx

@@ -0,0 +1,25 @@
+import { ScrollArea } from '@lobehub/ui';
+
+const paragraphs = [
+  "Vernacular architecture is building done outside any academic tradition, and without professional guidance. It is not a particular architectural movement or style, but rather a broad category, encompassing a wide range and variety of building types, with differing methods of construction, from around the world, both historical and extant and classical and modern. Vernacular architecture constitutes 95% of the world's built environment, as estimated in 1995 by Amos Rapoport, as measured against the small percentage of new buildings every year designed by architects and built by engineers.",
+  'This type of architecture usually serves immediate, local needs, is constrained by the materials available in its particular region and reflects local traditions and cultural practices. The study of vernacular architecture does not examine formally schooled architects, but instead that of the design skills and tradition of local builders, who were rarely given any attribution for the work. More recently, vernacular architecture has been examined by designers and the building industry in an effort to be more energy conscious with contemporary design and construction -- part of a broader interest in sustainable design.',
+];
+
+export default () => {
+  return (
+    <ScrollArea
+      scrollFade
+      style={{
+        height: 192,
+        maxWidth: 'calc(100vw - 8rem)',
+        width: '100%',
+      }}
+    >
+      {paragraphs.map((paragraph) => (
+        <p key={paragraph} style={{ margin: 0 }}>
+          {paragraph}
+        </p>
+      ))}
+    </ScrollArea>
+  );
+};