Card compact and expanded template

app/components/utility/Scrollbar/Scrollbar.types.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+
+export interface ScrollbarProps {
+  /** Content to scroll. */
+  children: ReactNode;
+  /** Optional class name merged with scrollbar-design. */
+  className?: string;
+  /** Vertical scroll only, horizontal only, or both. @default "vertical" */
+  orientation?: "vertical" | "horizontal" | "both";
+}

app/components/utility/Scrollbar/Scrollbar.view.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import type { ScrollbarProps } from "./Scrollbar.types";
+
+const overflowClass = {
+  vertical: "overflow-x-clip overflow-y-auto",
+  horizontal: "overflow-y-clip overflow-x-auto",
+  both: "overflow-auto",
+} as const;
+
+export function ScrollbarView({
+  children,
+  className = "",
+  orientation = "vertical",
+}: ScrollbarProps) {
+  return (
+    <div
+      className={`scrollbar-design ${overflowClass[orientation]} ${className}`.trim()}
+    >
+      {children}
+    </div>
+  );
+}

app/components/utility/Scrollbar/index.tsx

@@ -0,0 +1,5 @@
+export { ScrollbarView as default } from "./Scrollbar.view";
+export type { ScrollbarProps } from "./Scrollbar.types";
+
+/** Class name to apply the design system scrollbar to any scrollable element (e.g. textarea, div). */
+export const SCROLLBAR_DESIGN_CLASS = "scrollbar-design";