From 5025ffc6bc775c2aac9a93b0d60947746ca542c5 Mon Sep 17 00:00:00 2001
From: Greg Jordan <greg@studable.com>
Date: Tue, 12 Sep 2023 16:59:39 -0400
Subject: [PATCH 1/3] docs(scroll-area): add example for horizontal scroll area

---
 apps/www/__registry__/index.tsx               | 14 +++++
 .../content/docs/components/scroll-area.mdx   |  6 ++
 .../example/scroll-area-horizontal-demo.tsx   | 57 +++++++++++++++++++
 .../example/scroll-area-horizontal-demo.tsx   | 57 +++++++++++++++++++
 apps/www/registry/registry.ts                 |  6 ++
 5 files changed, 140 insertions(+)
 create mode 100644 apps/www/registry/default/example/scroll-area-horizontal-demo.tsx
 create mode 100644 apps/www/registry/new-york/example/scroll-area-horizontal-demo.tsx

diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx
index 26fc8aace90..ce1d47fb3dd 100644
--- a/apps/www/__registry__/index.tsx
+++ b/apps/www/__registry__/index.tsx
@@ -698,6 +698,13 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/default/example/scroll-area-demo")),
       files: ["registry/default/example/scroll-area-demo.tsx"],
     },
+    "scroll-area-horizontal-demo": {
+      name: "scroll-area-horizontal-demo",
+      type: "components:example",
+      registryDependencies: ["scroll-area"],
+      component: React.lazy(() => import("@/registry/default/example/scroll-area-horizontal-demo")),
+      files: ["registry/default/example/scroll-area-horizontal-demo.tsx"],
+    },
     "select-demo": {
       name: "select-demo",
       type: "components:example",
@@ -1707,6 +1714,13 @@ export const Index: Record<string, any> = {
       component: React.lazy(() => import("@/registry/new-york/example/scroll-area-demo")),
       files: ["registry/new-york/example/scroll-area-demo.tsx"],
     },
+    "scroll-area-horizontal-demo": {
+      name: "scroll-area-horizontal-demo",
+      type: "components:example",
+      registryDependencies: ["scroll-area"],
+      component: React.lazy(() => import("@/registry/new-york/example/scroll-area-horizontal-demo")),
+      files: ["registry/new-york/example/scroll-area-horizontal-demo.tsx"],
+    },
     "select-demo": {
       name: "select-demo",
       type: "components:example",
diff --git a/apps/www/content/docs/components/scroll-area.mdx b/apps/www/content/docs/components/scroll-area.mdx
index 1244e4cc9ba..e84d626cf02 100644
--- a/apps/www/content/docs/components/scroll-area.mdx
+++ b/apps/www/content/docs/components/scroll-area.mdx
@@ -63,3 +63,9 @@ import { ScrollArea } from "@/components/ui/scroll-area"
   started laughing, they couldn't stop.
 </ScrollArea>
 ```
+
+## Examples
+
+### Horizontal Scrolling
+
+<ComponentPreview name="scroll-area-horizontal-demo" />
diff --git a/apps/www/registry/default/example/scroll-area-horizontal-demo.tsx b/apps/www/registry/default/example/scroll-area-horizontal-demo.tsx
new file mode 100644
index 00000000000..292e3b9594f
--- /dev/null
+++ b/apps/www/registry/default/example/scroll-area-horizontal-demo.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import Image from "next/image"
+
+import { ScrollArea, ScrollBar } from "@/registry/default/ui/scroll-area"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/default/ui/tooltip"
+
+export interface Artwork {
+  artist: string
+  art: string
+}
+
+export const works: Artwork[] = [
+  {
+    artist: "Ornella Binni",
+    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Tom Byrom",
+    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Vladimir Malyavko",
+    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
+  },
+]
+
+export default function ScrollAreaHorizontalDemo() {
+  return (
+    <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+      <div className="flex space-x-4 pb-4">
+        {works.map((artwork) => (
+          <div
+            key={artwork.artist}
+            className="h-[400px] w-[300px] overflow-hidden rounded-md"
+          >
+            <Tooltip>
+              <TooltipTrigger>
+                <Image
+                  src={artwork.art}
+                  alt={`Photo by ${artwork.artist}`}
+                  width={300}
+                  height={400}
+                />
+              </TooltipTrigger>
+              <TooltipContent>Photo by {artwork.artist}</TooltipContent>
+            </Tooltip>
+          </div>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  )
+}
diff --git a/apps/www/registry/new-york/example/scroll-area-horizontal-demo.tsx b/apps/www/registry/new-york/example/scroll-area-horizontal-demo.tsx
new file mode 100644
index 00000000000..f8581fa7cc6
--- /dev/null
+++ b/apps/www/registry/new-york/example/scroll-area-horizontal-demo.tsx
@@ -0,0 +1,57 @@
+import * as React from "react"
+import Image from "next/image"
+
+import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/registry/new-york/ui/tooltip"
+
+export interface Artwork {
+  artist: string
+  art: string
+}
+
+export const works: Artwork[] = [
+  {
+    artist: "Ornella Binni",
+    art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Tom Byrom",
+    art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
+  },
+  {
+    artist: "Vladimir Malyavko",
+    art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
+  },
+]
+
+export default function ScrollAreaHorizontalDemo() {
+  return (
+    <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+      <div className="flex space-x-4 pb-4">
+        {works.map((artwork) => (
+          <div
+            key={artwork.artist}
+            className="h-[400px] w-[300px] overflow-hidden rounded-md"
+          >
+            <Tooltip>
+              <TooltipTrigger>
+                <Image
+                  src={artwork.art}
+                  alt={`Photo by ${artwork.artist}`}
+                  width={300}
+                  height={400}
+                />
+              </TooltipTrigger>
+              <TooltipContent>Photo by {artwork.artist}</TooltipContent>
+            </Tooltip>
+          </div>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  )
+}
diff --git a/apps/www/registry/registry.ts b/apps/www/registry/registry.ts
index 789a4cfcdc8..b0de6305741 100644
--- a/apps/www/registry/registry.ts
+++ b/apps/www/registry/registry.ts
@@ -605,6 +605,12 @@ const example: Registry = [
     registryDependencies: ["scroll-area"],
     files: ["example/scroll-area-demo.tsx"],
   },
+  {
+    name: "scroll-area-horizontal-demo",
+    type: "components:example",
+    registryDependencies: ["scroll-area"],
+    files: ["example/scroll-area-horizontal-demo.tsx"],
+  },
   {
     name: "select-demo",
     type: "components:example",

From 7f1b09a21325bfb68d01dd4ce8d7bd9381241712 Mon Sep 17 00:00:00 2001
From: Greg Jordan <greg@studable.com>
Date: Tue, 12 Sep 2023 17:01:18 -0400
Subject: [PATCH 2/3] fix(scroll-area): improper horizontal scroll bar width

---
 apps/www/registry/default/ui/scroll-area.tsx  | 2 +-
 apps/www/registry/new-york/ui/scroll-area.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/www/registry/default/ui/scroll-area.tsx b/apps/www/registry/default/ui/scroll-area.tsx
index 54b87cd7657..0b4a48d87fa 100644
--- a/apps/www/registry/default/ui/scroll-area.tsx
+++ b/apps/www/registry/default/ui/scroll-area.tsx
@@ -35,7 +35,7 @@ const ScrollBar = React.forwardRef<
       orientation === "vertical" &&
         "h-full w-2.5 border-l border-l-transparent p-[1px]",
       orientation === "horizontal" &&
-        "h-2.5 border-t border-t-transparent p-[1px]",
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       className
     )}
     {...props}
diff --git a/apps/www/registry/new-york/ui/scroll-area.tsx b/apps/www/registry/new-york/ui/scroll-area.tsx
index 54b87cd7657..0b4a48d87fa 100644
--- a/apps/www/registry/new-york/ui/scroll-area.tsx
+++ b/apps/www/registry/new-york/ui/scroll-area.tsx
@@ -35,7 +35,7 @@ const ScrollBar = React.forwardRef<
       orientation === "vertical" &&
         "h-full w-2.5 border-l border-l-transparent p-[1px]",
       orientation === "horizontal" &&
-        "h-2.5 border-t border-t-transparent p-[1px]",
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       className
     )}
     {...props}

From 32d9d23abbfb216007e96edff30e42d19048f8a2 Mon Sep 17 00:00:00 2001
From: Greg Jordan <greg@studable.com>
Date: Mon, 18 Sep 2023 14:37:45 -0400
Subject: [PATCH 3/3] refactor(scroll-area): exchange tooltip for caption in
 horizontal scroll-area demo

---
 .../example/scroll-area-horizontal-demo.tsx   | 40 +++++++++----------
 .../example/scroll-area-horizontal-demo.tsx   | 40 +++++++++----------
 2 files changed, 36 insertions(+), 44 deletions(-)

diff --git a/apps/www/registry/default/example/scroll-area-horizontal-demo.tsx b/apps/www/registry/default/example/scroll-area-horizontal-demo.tsx
index 292e3b9594f..fad6de53485 100644
--- a/apps/www/registry/default/example/scroll-area-horizontal-demo.tsx
+++ b/apps/www/registry/default/example/scroll-area-horizontal-demo.tsx
@@ -2,11 +2,6 @@ import * as React from "react"
 import Image from "next/image"
 
 import { ScrollArea, ScrollBar } from "@/registry/default/ui/scroll-area"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/default/ui/tooltip"
 
 export interface Artwork {
   artist: string
@@ -31,24 +26,25 @@ export const works: Artwork[] = [
 export default function ScrollAreaHorizontalDemo() {
   return (
     <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
-      <div className="flex space-x-4 pb-4">
+      <div className="flex w-max space-x-4 p-4">
         {works.map((artwork) => (
-          <div
-            key={artwork.artist}
-            className="h-[400px] w-[300px] overflow-hidden rounded-md"
-          >
-            <Tooltip>
-              <TooltipTrigger>
-                <Image
-                  src={artwork.art}
-                  alt={`Photo by ${artwork.artist}`}
-                  width={300}
-                  height={400}
-                />
-              </TooltipTrigger>
-              <TooltipContent>Photo by {artwork.artist}</TooltipContent>
-            </Tooltip>
-          </div>
+          <figure key={artwork.artist} className="shrink-0">
+            <div className="overflow-hidden rounded-md">
+              <Image
+                src={artwork.art}
+                alt={`Photo by ${artwork.artist}`}
+                className="aspect-[3/4] h-fit w-fit object-cover"
+                width={300}
+                height={400}
+              />
+            </div>
+            <figcaption className="pt-2 text-xs text-muted-foreground">
+              Photo by{" "}
+              <span className="font-semibold text-foreground">
+                {artwork.artist}
+              </span>
+            </figcaption>
+          </figure>
         ))}
       </div>
       <ScrollBar orientation="horizontal" />
diff --git a/apps/www/registry/new-york/example/scroll-area-horizontal-demo.tsx b/apps/www/registry/new-york/example/scroll-area-horizontal-demo.tsx
index f8581fa7cc6..d837e0a81f3 100644
--- a/apps/www/registry/new-york/example/scroll-area-horizontal-demo.tsx
+++ b/apps/www/registry/new-york/example/scroll-area-horizontal-demo.tsx
@@ -2,11 +2,6 @@ import * as React from "react"
 import Image from "next/image"
 
 import { ScrollArea, ScrollBar } from "@/registry/new-york/ui/scroll-area"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/registry/new-york/ui/tooltip"
 
 export interface Artwork {
   artist: string
@@ -31,24 +26,25 @@ export const works: Artwork[] = [
 export default function ScrollAreaHorizontalDemo() {
   return (
     <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
-      <div className="flex space-x-4 pb-4">
+      <div className="flex w-max space-x-4 p-4">
         {works.map((artwork) => (
-          <div
-            key={artwork.artist}
-            className="h-[400px] w-[300px] overflow-hidden rounded-md"
-          >
-            <Tooltip>
-              <TooltipTrigger>
-                <Image
-                  src={artwork.art}
-                  alt={`Photo by ${artwork.artist}`}
-                  width={300}
-                  height={400}
-                />
-              </TooltipTrigger>
-              <TooltipContent>Photo by {artwork.artist}</TooltipContent>
-            </Tooltip>
-          </div>
+          <figure key={artwork.artist} className="shrink-0">
+            <div className="overflow-hidden rounded-md">
+              <Image
+                src={artwork.art}
+                alt={`Photo by ${artwork.artist}`}
+                className="aspect-[3/4] h-fit w-fit object-cover"
+                width={300}
+                height={400}
+              />
+            </div>
+            <figcaption className="pt-2 text-xs text-muted-foreground">
+              Photo by{" "}
+              <span className="font-semibold text-foreground">
+                {artwork.artist}
+              </span>
+            </figcaption>
+          </figure>
         ))}
       </div>
       <ScrollBar orientation="horizontal" />