Add vertical zoom slider orientation

apps/ui-components/registry/components/zoom-slider/app-example.tsx

@@ -1,5 +1,7 @@
-import { Background, ReactFlow } from "@xyflow/react";
+import { Background, Panel, ReactFlow } from "@xyflow/react";
 import { ZoomSlider } from "@/registry/components/zoom-slider/";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
 
 const defaultNodes = [
   {
@@ -10,11 +12,26 @@ const defaultNodes = [
 ];
 
 export default function App() {
+  const [orientation, setOrientation] = useState<"horizontal" | "vertical">(
+    "horizontal",
+  );
+
   return (
     <div className="h-full w-full">
       <ReactFlow defaultNodes={defaultNodes} fitView>
         <Background />
-        <ZoomSlider position="top-left" />
+        <ZoomSlider position="top-left" orientation={orientation} />
+        <Panel position="bottom-right">
+          <Button
+            onClick={() =>
+              setOrientation(
+                orientation === "horizontal" ? "vertical" : "horizontal",
+              )
+            }
+          >
+            Toggle orientation
+          </Button>
+        </Panel>
       </ReactFlow>
     </div>
   );

apps/ui-components/registry/components/zoom-slider/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React from "react";
+import React, { forwardRef } from "react";
 import { Maximize, Minus, Plus } from "lucide-react";
 
 import {
@@ -17,8 +17,11 @@ import { cn } from "@/lib/utils";
 
 export function ZoomSlider({
   className,
+  orientation = "vertical",
   ...props
-}: Omit<PanelProps, "children">) {
+}: Omit<PanelProps, "children"> & {
+  orientation?: "horizontal" | "vertical";
+}) {
   const { zoom } = useViewport();
   const { zoomTo, zoomIn, zoomOut, fitView } = useReactFlow();
   const minZoom = useStore((state) => state.minZoom);
@@ -28,34 +31,50 @@ export function ZoomSlider({
     <Panel
       className={cn(
         "bg-primary-foreground text-foreground flex gap-1 rounded-md p-1",
+        orientation === "horizontal" ? "flex-row" : "flex-col",
         className,
       )}
       {...props}
     >
-      <Button
-        variant="ghost"
-        size="icon"
-        onClick={() => zoomOut({ duration: 300 })}
+      <div
+        className={cn(
+          "flex gap-1",
+          orientation === "horizontal" ? "flex-row" : "flex-col-reverse",
+        )}
       >
-        <Minus className="h-4 w-4" />
-      </Button>
-      <Slider
-        className="w-[140px]"
-        value={[zoom]}
-        min={minZoom}
-        max={maxZoom}
-        step={0.01}
-        onValueChange={(values) => zoomTo(values[0])}
-      />
-      <Button
-        variant="ghost"
-        size="icon"
-        onClick={() => zoomIn({ duration: 300 })}
-      >
-        <Plus className="h-4 w-4" />
-      </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => zoomOut({ duration: 300 })}
+        >
+          <Minus className="h-4 w-4" />
+        </Button>
+        <Slider
+          className={cn(
+            orientation === "horizontal" ? "w-[140px]" : "h-[140px]",
+          )}
+          orientation={orientation}
+          value={[zoom]}
+          min={minZoom}
+          max={maxZoom}
+          step={0.01}
+          onValueChange={(values) => zoomTo(values[0])}
+        />
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => zoomIn({ duration: 300 })}
+        >
+          <Plus className="h-4 w-4" />
+        </Button>
+      </div>
       <Button
-        className="min-w-20 tabular-nums"
+        className={cn(
+          "tabular-nums",
+          orientation === "horizontal"
+            ? "w-[140px] min-w-10"
+            : "h-[40px] w-[40px]",
+        )}
         variant="ghost"
         onClick={() => zoomTo(1, { duration: 300 })}
       >