@playfast/reform-better-hub-ui-primitives 0.0.3 → 0.0.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@playfast/reform-better-hub-ui-primitives",
   "playbook": "./playbook",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "description": "React UI primitives adapted from better-hub by Better Auth (https://github.com/better-auth/better-hub). Full credit to the Better Auth team.",
   "keywords": [

package/src/components/popover.tsx

@@ -28,7 +28,10 @@ function PopoverContent({
 				align={align}
 				sideOffset={sideOffset}
 				className={cn(
-					"z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+					// NOTE: `--popover` is not defined in this design system (only --background/--card/…),
+					// so `bg-popover` rendered transparent. Use the defined `bg-background`/`text-foreground`
+					// (exactly what DropdownMenuContent uses) so a portaled popover is opaque.
+					"z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-background p-4 text-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
 					className,
 				)}
 				{...props}

package/src/components/resize-handle.tsx

@@ -7,14 +7,18 @@ import type { MouseEvent as ReactMouseEvent } from "react";
 import { cn } from "../foundation/cn";
 
 interface ResizeHandleProps {
-	/** Called continuously during drag with clientX pixel position */
-	onResize: (clientX: number) => void;
+	/** Called continuously during drag with the pointer position on the resize axis
+	 *  (clientX for `axis: "x"`, clientY for `axis: "y"`). */
+	onResize: (clientPos: number) => void;
 	/** Called when drag starts */
 	onDragStart?: () => void;
 	/** Called when drag ends */
 	onDragEnd?: () => void;
 	/** Double click handler (e.g. reset to default) */
 	onDoubleClick?: () => void;
+	/** Resize axis: "x" (vertical handle, horizontal drag — default) or "y" (horizontal
+	 *  handle, vertical drag — for a top/bottom panel edge). */
+	axis?: "x" | "y";
 	className?: string;
 }
 
@@ -23,9 +27,11 @@ export function ResizeHandle({
 	onDragStart,
 	onDragEnd,
 	onDoubleClick,
+	axis = "x",
 	className,
 }: ResizeHandleProps): React.JSX.Element {
 	const [isDragging, setIsDragging] = useState(false);
+	const vertical = axis === "y";
 
 	const handleMouseDown = useCallback(
 		(e: ReactMouseEvent) => {
@@ -40,7 +46,7 @@ export function ResizeHandle({
 		if (!isDragging) return;
 
 		const handleMouseMove = (e: MouseEvent) => {
-			onResize(e.clientX);
+			onResize(vertical ? e.clientY : e.clientX);
 		};
 
 		const handleMouseUp = () => {
@@ -51,7 +57,7 @@ export function ResizeHandle({
 		document.addEventListener("mousemove", handleMouseMove);
 		document.addEventListener("mouseup", handleMouseUp);
 		document.body.style.userSelect = "none";
-		document.body.style.cursor = "col-resize";
+		document.body.style.cursor = vertical ? "row-resize" : "col-resize";
 
 		return () => {
 			document.removeEventListener("mousemove", handleMouseMove);
@@ -59,23 +65,30 @@ export function ResizeHandle({
 			document.body.style.userSelect = "";
 			document.body.style.cursor = "";
 		};
-	}, [isDragging, onResize, onDragEnd]);
+	}, [isDragging, onResize, onDragEnd, vertical]);
 
 	return (
 		<div
 			onMouseDown={handleMouseDown}
 			onDoubleClick={onDoubleClick}
 			className={cn(
-				"relative shrink-0 w-0 group/resize cursor-col-resize z-10",
+				"relative shrink-0 group/resize z-10",
+				vertical ? "h-0 cursor-row-resize" : "w-0 cursor-col-resize",
 				className,
 			)}
 		>
 			{/* Wider invisible hit area */}
-			<div className="absolute inset-y-0 -left-[5px] w-[11px]" />
+			<div
+				className={cn(
+					"absolute",
+					vertical ? "inset-x-0 -top-[5px] h-[11px]" : "inset-y-0 -left-[5px] w-[11px]",
+				)}
+			/>
 			{/* Visible line */}
 			<div
 				className={cn(
-					"absolute inset-y-0 -left-px w-[2px] transition-all duration-150",
+					"absolute transition-all duration-150",
+					vertical ? "inset-x-0 -top-px h-[2px]" : "inset-y-0 -left-px w-[2px]",
 					isDragging
 						? "bg-foreground/25"
 						: "bg-transparent group-hover/resize:bg-foreground/15",