From fbef711f180b4c8da4ec3b1435397cf7b022a928 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 9 Sep 2025 12:25:19 +0530
Subject: [PATCH 1/4] dev: scrollarea added to propel

---
 packages/propel/src/scrollarea/index.ts       |  1 +
 packages/propel/src/scrollarea/scrollarea.tsx | 96 +++++++++++++++++++
 2 files changed, 97 insertions(+)
 create mode 100644 packages/propel/src/scrollarea/index.ts
 create mode 100644 packages/propel/src/scrollarea/scrollarea.tsx

diff --git a/packages/propel/src/scrollarea/index.ts b/packages/propel/src/scrollarea/index.ts
new file mode 100644
index 00000000000..d0025852df6
--- /dev/null
+++ b/packages/propel/src/scrollarea/index.ts
@@ -0,0 +1 @@
+export * from "./scrollarea";
diff --git a/packages/propel/src/scrollarea/scrollarea.tsx b/packages/propel/src/scrollarea/scrollarea.tsx
new file mode 100644
index 00000000000..928f217ef26
--- /dev/null
+++ b/packages/propel/src/scrollarea/scrollarea.tsx
@@ -0,0 +1,96 @@
+import * as React from "react";
+import { ScrollArea as BaseScrollArea } from "@base-ui-components/react/scroll-area";
+
+import { cn } from "../utils/classname";
+
+type ScrollAreaOrientation = "horizontal" | "vertical";
+type ScrollAreaScrollType = "always" | "scroll" | "hover";
+type ScrollAreaSize = "sm" | "md" | "lg";
+
+interface ScrollAreaProps extends React.ComponentProps<typeof BaseScrollArea.Root> {
+  orientation?: ScrollAreaOrientation;
+  scrollType?: ScrollAreaScrollType;
+  size?: ScrollAreaSize;
+}
+
+function ScrollArea({
+  className,
+  children,
+  orientation,
+  scrollType,
+  size = "md",
+  ...props
+}: ScrollAreaProps) {
+  return (
+    <BaseScrollArea.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
+      <BaseScrollArea.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full overscroll-contain rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline"
+      >
+        {children}
+      </BaseScrollArea.Viewport>
+      <ScrollBar orientation={orientation} scrollType={scrollType} size={size} />
+      <BaseScrollArea.Corner />
+    </BaseScrollArea.Root>
+  );
+}
+
+const horizontalSizeStyles = {
+  sm: "p-[0.112rem] h-2.5",
+  md: "p-[0.112rem] h-3",
+  lg: "p-[0.112rem] h-4",
+} as const;
+
+const verticalSizeStyles = {
+  sm: "p-[0.112rem] w-2.5",
+  md: "p-[0.112rem] w-3",
+  lg: "p-[0.112rem] w-4",
+} as const;
+
+const thumbSizeStyles = {
+  sm: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-11 before:min-w-11 before:-translate-x-1/2 before:-translate-y-1/2",
+  md: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-14 before:min-w-14 before:-translate-x-1/2 before:-translate-y-1/2",
+  lg: "before:absolute before:left-1/2 before:top-1/2 before:size-full before:min-h-17 before:min-w-17 before:-translate-x-1/2 before:-translate-y-1/2",
+} as const;
+
+interface ScrollBarProps extends React.ComponentProps<typeof BaseScrollArea.Scrollbar> {
+  scrollType?: ScrollAreaScrollType;
+  size?: ScrollAreaSize;
+}
+
+const ScrollBar = React.memo(function ScrollBar({
+  className,
+  orientation = "vertical",
+  scrollType = "always",
+  size = "md",
+  ...props
+}: ScrollBarProps) {
+  return (
+    <BaseScrollArea.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "group/track mr-1 flex justify-center rounded bg-transparent opacity-0 transition-opacity delay-300 ",
+        orientation === "vertical" && verticalSizeStyles[size],
+        orientation === "horizontal" && horizontalSizeStyles[size],
+        scrollType === "always" && "opacity-100",
+        scrollType === "scroll" &&
+          "data-[scrolling]:opacity-100  data-[scrolling]:delay-0 data-[scrolling]:duration-75",
+        scrollType === "hover" && "data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:duration-75",
+        className
+      )}
+      {...props}
+    >
+      <BaseScrollArea.Thumb
+        data-slot="scroll-area-thumb"
+        className={cn(
+          "relative flex-1 rounded-[10px] bg-custom-scrollbar-neutral group-hover:bg-custom-scrollbar-hover group-active/track:bg-custom-scrollbar-active data-[scrolling]:bg-custom-scrollbar-active",
+          thumbSizeStyles[size]
+        )}
+      />
+    </BaseScrollArea.Scrollbar>
+  );
+});
+
+export { ScrollArea };
+export type { ScrollAreaProps, ScrollAreaOrientation, ScrollAreaScrollType, ScrollAreaSize };

From 774d3af9a39a12ed87321426d101671d0a476778 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 9 Sep 2025 12:25:56 +0530
Subject: [PATCH 2/4] dev: scrollarea story added

---
 .../src/scrollarea/scrollarea.stories.tsx     | 101 ++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 packages/propel/src/scrollarea/scrollarea.stories.tsx

diff --git a/packages/propel/src/scrollarea/scrollarea.stories.tsx b/packages/propel/src/scrollarea/scrollarea.stories.tsx
new file mode 100644
index 00000000000..7cd9f686c11
--- /dev/null
+++ b/packages/propel/src/scrollarea/scrollarea.stories.tsx
@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ScrollArea } from "./scrollarea";
+
+const meta: Meta<typeof ScrollArea> = {
+  title: "Components/ScrollArea",
+  component: ScrollArea,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "A customizable scroll area component with multiple size variants, scroll behaviors, and orientations.",
+      },
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: { type: "select" },
+      options: ["vertical", "horizontal"],
+      description: "Orientation of the scrollbar",
+      table: {
+        type: { summary: "ScrollAreaOrientation" },
+        defaultValue: { summary: "vertical" },
+      },
+    },
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+      description: "Size variant of the scrollbar",
+      table: {
+        type: { summary: "ScrollAreaSize" },
+        defaultValue: { summary: "md" },
+      },
+    },
+    scrollType: {
+      control: { type: "select" },
+      options: ["always", "scroll", "hover"],
+      description: "When to show the scrollbar",
+      table: {
+        type: { summary: "ScrollAreaScrollType" },
+        defaultValue: { summary: "always" },
+      },
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ScrollArea>;
+
+// Sample content components for stories
+const LongTextContent = () => (
+  <div className="p-4 space-y-4">
+    <h3 className="text-lg font-semibold">Long Text Content</h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat.
+    </p>
+    <p>
+      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+      sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </p>
+    <p>
+      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
+      aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+    </p>
+    <p>
+      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
+      eos qui ratione voluptatem sequi nesciunt.
+    </p>
+    <p>
+      Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
+      eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
+    </p>
+    <p>
+      Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
+      commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae
+      consequatur.
+    </p>
+  </div>
+);
+
+
+// Default story
+export const Default: Story = {
+  args: {
+    className: "h-64 w-80 border rounded-lg",
+    size: "md",
+    scrollType: "always",
+    orientation: "vertical",
+  },
+  render: (args) => (
+    <ScrollArea {...args}>
+      <LongTextContent />
+    </ScrollArea>
+  ),
+};

From 7b3acfe26d631d7c076c62c19bf82df8157a7443 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 9 Sep 2025 12:26:29 +0530
Subject: [PATCH 3/4] chore: propel config updated

---
 packages/propel/package.json     | 1 +
 packages/propel/tsdown.config.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/propel/package.json b/packages/propel/package.json
index 15933f2af5a..5268c32e57e 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -27,6 +27,7 @@
     "./icons": "./dist/icons/index.js",
     "./menu": "./dist/menu/index.js",
     "./popover": "./dist/popover/index.js",
+    "./scrollarea": "./dist/scrollarea/index.js",
     "./skeleton": "./dist/skeleton/index.js",
     "./styles/fonts": "./dist/styles/fonts/index.css",
     "./switch": "./dist/switch/index.js",
diff --git a/packages/propel/tsdown.config.ts b/packages/propel/tsdown.config.ts
index 8f23c301cb8..e60cee4c656 100644
--- a/packages/propel/tsdown.config.ts
+++ b/packages/propel/tsdown.config.ts
@@ -13,6 +13,7 @@ export default defineConfig({
     "src/icons/index.ts",
     "src/menu/index.ts",
     "src/popover/index.ts",
+    "src/scrollarea/index.ts",
     "src/skeleton/index.ts",
     "src/switch/index.ts",
     "src/table/index.ts",

From 9faafed8728dbe5790c4b122f22377b627818c9d Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
Date: Tue, 9 Sep 2025 12:50:59 +0530
Subject: [PATCH 4/4] fix: format error

---
 packages/propel/src/scrollarea/scrollarea.stories.tsx | 1 -
 packages/propel/src/scrollarea/scrollarea.tsx         | 9 +--------
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/propel/src/scrollarea/scrollarea.stories.tsx b/packages/propel/src/scrollarea/scrollarea.stories.tsx
index 7cd9f686c11..208c67bb9de 100644
--- a/packages/propel/src/scrollarea/scrollarea.stories.tsx
+++ b/packages/propel/src/scrollarea/scrollarea.stories.tsx
@@ -84,7 +84,6 @@ const LongTextContent = () => (
   </div>
 );
 
-
 // Default story
 export const Default: Story = {
   args: {
diff --git a/packages/propel/src/scrollarea/scrollarea.tsx b/packages/propel/src/scrollarea/scrollarea.tsx
index 928f217ef26..b3f83301575 100644
--- a/packages/propel/src/scrollarea/scrollarea.tsx
+++ b/packages/propel/src/scrollarea/scrollarea.tsx
@@ -13,14 +13,7 @@ interface ScrollAreaProps extends React.ComponentProps<typeof BaseScrollArea.Roo
   size?: ScrollAreaSize;
 }
 
-function ScrollArea({
-  className,
-  children,
-  orientation,
-  scrollType,
-  size = "md",
-  ...props
-}: ScrollAreaProps) {
+function ScrollArea({ className, children, orientation, scrollType, size = "md", ...props }: ScrollAreaProps) {
   return (
     <BaseScrollArea.Root data-slot="scroll-area" className={cn("relative", className)} {...props}>
       <BaseScrollArea.Viewport