feat: add component scroll-area

Author: Ohh-889

packages/ui-variants/src/index.ts

@@ -5,4 +5,5 @@ export * from './types';
 export * from './variants/button';
 export * from './variants/button-group';
 export * from './variants/card';
+export * from './variants/scroll-area';
 export * from './variants/tabs';

packages/ui-variants/src/variants/scroll-area.ts

@@ -0,0 +1,121 @@
+import { tv } from 'tailwind-variants';
+
+export const scrollAreaVariants = tv({
+  slots: {
+    root: 'relative overflow-hidden',
+    viewport: 'size-full rounded-inherit',
+    scrollbar: 'flex touch-none select-none transition-colors-200',
+    thumb: 'relative flex-1 rounded-full bg-border',
+    corner: ''
+  },
+  variants: {
+    size: {
+      xs: {},
+      sm: {},
+      md: {},
+      lg: {},
+      xl: {},
+      '2xl': {}
+    },
+    orientation: {
+      horizontal: {
+        scrollbar: 'flex-col p-px border-t border-t-transparent'
+      },
+      vertical: {
+        scrollbar: 'h-full p-px border-l border-l-transparent'
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      size: 'xs',
+      orientation: 'horizontal',
+      class: {
+        scrollbar: 'h-1.5'
+      }
+    },
+    {
+      size: 'xs',
+      orientation: 'vertical',
+      class: {
+        scrollbar: 'w-1.5'
+      }
+    },
+    {
+      size: 'sm',
+      orientation: 'horizontal',
+      class: {
+        scrollbar: 'h-2'
+      }
+    },
+    {
+      size: 'sm',
+      orientation: 'vertical',
+      class: {
+        scrollbar: 'w-2'
+      }
+    },
+    {
+      size: 'md',
+      orientation: 'horizontal',
+      class: {
+        scrollbar: 'h-2.5'
+      }
+    },
+    {
+      size: 'md',
+      orientation: 'vertical',
+      class: {
+        scrollbar: 'w-2.5'
+      }
+    },
+    {
+      size: 'lg',
+      orientation: 'horizontal',
+      class: {
+        scrollbar: 'h-3'
+      }
+    },
+    {
+      size: 'lg',
+      orientation: 'vertical',
+      class: {
+        scrollbar: 'w-3'
+      }
+    },
+    {
+      size: 'xl',
+      orientation: 'horizontal',
+      class: {
+        scrollbar: 'h-3.5'
+      }
+    },
+    {
+      size: 'xl',
+      orientation: 'vertical',
+      class: {
+        scrollbar: 'w-3.5'
+      }
+    },
+    {
+      size: '2xl',
+      orientation: 'horizontal',
+      class: {
+        scrollbar: 'h-4'
+      }
+    },
+    {
+      size: '2xl',
+      orientation: 'vertical',
+      class: {
+        scrollbar: 'w-4'
+      }
+    }
+  ],
+  defaultVariants: {
+    size: 'md',
+    orientation: 'vertical'
+  }
+});
+
+export type ScrollAreaSlots = keyof typeof scrollAreaVariants.slots;

packages/ui/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@radix-ui/react-compose-refs": "1.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-slot": "1.2.3",
     "@radix-ui/react-tabs": "1.1.12",
     "@soybean-react-ui/variants": "workspace:*",

packages/ui/src/components/scroll-area/index.ts

@@ -0,0 +1,7 @@
+export { default as ScrollArea } from './source/ScrollArea';
+export { default as ScrollAreaRoot } from './source/ScrollAreaRoot';
+export { default as ScrollAreaScrollbar } from './source/ScrollAreaScrollbar';
+export { default as ScrollAreaThumb } from './source/ScrollAreaThumb';
+export { default as ScrollAreaViewport } from './source/ScrollAreaViewport';
+
+export * from './types';

packages/ui/src/components/scroll-area/source/ScrollArea.tsx

@@ -0,0 +1,44 @@
+import { ScrollAreaCorner } from '@radix-ui/react-scroll-area';
+import { cn } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { ScrollAreaProps } from '../types';
+
+import ScrollAreaRoot from './ScrollAreaRoot';
+import ScrollAreaScrollbar from './ScrollAreaScrollbar';
+import ScrollAreaThumb from './ScrollAreaThumb';
+import ScrollAreaViewport from './ScrollAreaViewport';
+
+const ScrollArea = forwardRef<React.ElementRef<typeof ScrollAreaRoot>, ScrollAreaProps>((props, ref) => {
+  const { children, className, classNames, forceMount, nonce, orientation, size, ...rest } = props;
+
+  return (
+    <ScrollAreaRoot
+      className={className}
+      {...rest}
+      ref={ref}
+    >
+      <ScrollAreaViewport
+        className={classNames?.viewport}
+        nonce={nonce}
+      >
+        {children}
+      </ScrollAreaViewport>
+
+      <ScrollAreaScrollbar
+        className={classNames?.scrollbar}
+        forceMount={forceMount}
+        orientation={orientation}
+        size={size}
+      >
+        <ScrollAreaThumb className={classNames?.thumb} />
+      </ScrollAreaScrollbar>
+
+      <ScrollAreaCorner className={cn(classNames?.corner)} />
+    </ScrollAreaRoot>
+  );
+});
+
+ScrollArea.displayName = 'ScrollArea';
+
+export default ScrollArea;

packages/ui/src/components/scroll-area/source/ScrollAreaRoot.tsx

@@ -0,0 +1,25 @@
+import { Root } from '@radix-ui/react-scroll-area';
+import { cn, scrollAreaVariants } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { ScrollAreaRootProps } from '../types';
+
+const ScrollAreaRoot = forwardRef<React.ElementRef<typeof Root>, ScrollAreaRootProps>((props, ref) => {
+  const { className, ...rest } = props;
+
+  const { root } = scrollAreaVariants();
+
+  const mergedCls = cn(root(), className);
+
+  return (
+    <Root
+      className={mergedCls}
+      {...rest}
+      ref={ref}
+    />
+  );
+});
+
+ScrollAreaRoot.displayName = 'ScrollAreaRoot';
+
+export default ScrollAreaRoot;

packages/ui/src/components/scroll-area/source/ScrollAreaScrollbar.tsx

@@ -0,0 +1,26 @@
+import { Scrollbar } from '@radix-ui/react-scroll-area';
+import { cn, scrollAreaVariants } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { ScrollAreaScrollbarProps } from '../types';
+
+const ScrollAreaScrollbar = forwardRef<React.ElementRef<typeof Scrollbar>, ScrollAreaScrollbarProps>((props, ref) => {
+  const { className, orientation, size, ...rest } = props;
+
+  const { scrollbar } = scrollAreaVariants({ orientation, size });
+
+  const mergedCls = cn(scrollbar(), className);
+
+  return (
+    <Scrollbar
+      className={mergedCls}
+      orientation={orientation}
+      {...rest}
+      ref={ref}
+    />
+  );
+});
+
+ScrollAreaScrollbar.displayName = 'ScrollAreaScrollbar';
+
+export default ScrollAreaScrollbar;

packages/ui/src/components/scroll-area/source/ScrollAreaThumb.tsx

@@ -0,0 +1,25 @@
+import { Thumb } from '@radix-ui/react-scroll-area';
+import { cn, scrollAreaVariants } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { ScrollAreaThumbProps } from '../types';
+
+const ScrollAreaScrollbar = forwardRef<React.ElementRef<typeof Thumb>, ScrollAreaThumbProps>((props, ref) => {
+  const { className, ...rest } = props;
+
+  const { thumb } = scrollAreaVariants();
+
+  const mergedCls = cn(thumb(), className);
+
+  return (
+    <Thumb
+      className={mergedCls}
+      {...rest}
+      ref={ref}
+    />
+  );
+});
+
+ScrollAreaScrollbar.displayName = 'ScrollAreaScrollbar';
+
+export default ScrollAreaScrollbar;

packages/ui/src/components/scroll-area/source/ScrollAreaViewport.tsx

@@ -0,0 +1,25 @@
+import { Viewport } from '@radix-ui/react-scroll-area';
+import { cn, scrollAreaVariants } from '@soybean-react-ui/variants';
+import { forwardRef } from 'react';
+
+import type { ScrollAreaViewportProps } from '../types';
+
+const ScrollAreaViewport = forwardRef<React.ElementRef<typeof Viewport>, ScrollAreaViewportProps>((props, ref) => {
+  const { className, ...rest } = props;
+
+  const { viewport } = scrollAreaVariants();
+
+  const mergedCls = cn(viewport(), className);
+
+  return (
+    <Viewport
+      className={mergedCls}
+      {...rest}
+      ref={ref}
+    />
+  );
+});
+
+ScrollAreaViewport.displayName = 'ScrollAreaViewport';
+
+export default ScrollAreaViewport;

packages/ui/src/components/scroll-area/types.ts

@@ -0,0 +1,25 @@
+import type {
+  ScrollAreaProps as _ScrollAreaProps,
+  ScrollAreaScrollbarProps as _ScrollAreaScrollbarProps,
+  ScrollAreaViewportProps as _ScrollAreaViewportProps
+} from '@radix-ui/react-scroll-area';
+import type { ClassValue, ClassValueProp, ScrollAreaSlots } from '@soybean-react-ui/variants';
+
+import type { BaseNodeProps } from '../../types/other';
+
+export type ScrollAreaUi = Partial<Record<ScrollAreaSlots, ClassValue>>;
+
+export type ScrollAreaRootProps = BaseNodeProps<_ScrollAreaProps>;
+
+export type ScrollAreaScrollbarProps = BaseNodeProps<_ScrollAreaScrollbarProps>;
+
+export type ScrollAreaThumbProps = ClassValueProp;
+
+export type ScrollAreaViewportProps = BaseNodeProps<_ScrollAreaViewportProps>;
+
+export interface ScrollAreaProps
+  extends ScrollAreaRootProps,
+    Omit<ScrollAreaScrollbarProps, 'dir'>,
+    Omit<ScrollAreaViewportProps, 'dir'> {
+  classNames?: ScrollAreaUi;
+}