@playfast/reform-better-hub-ui-primitives 0.0.2 → 0.0.4

package/src/components/dialog.tsx

@@ -0,0 +1,129 @@
+// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
+// (apps/web/src/components/ui/dialog.tsx). Full credit to the Better Auth team.
+
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import type * as React from "react";
+import { cn } from "../foundation/cn";
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element {
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element {
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element {
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element {
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element {
+	return (
+		<DialogPrimitive.Overlay
+			data-slot="dialog-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/25 dark:bg-black/70 backdrop-blur-[2px]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DialogContent({
+	className,
+	children,
+	showCloseButton = true,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+	showCloseButton?: boolean;
+}): React.JSX.Element {
+	return (
+		<DialogPortal>
+			<DialogOverlay />
+			<DialogPrimitive.Content
+				data-slot="dialog-content"
+				className={cn(
+					"overflow-y-auto bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+				{showCloseButton && (
+					<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+						<XIcon />
+						<span className="sr-only">Close</span>
+					</DialogPrimitive.Close>
+				)}
+			</DialogPrimitive.Content>
+		</DialogPortal>
+	);
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element {
+	return (
+		<div
+			data-slot="dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element {
+	return (
+		<div
+			data-slot="dialog-footer"
+			className={cn(
+				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element {
+	return (
+		<DialogPrimitive.Title
+			data-slot="dialog-title"
+			className={cn("text-lg leading-none font-semibold", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>): React.JSX.Element {
+	return (
+		<DialogPrimitive.Description
+			data-slot="dialog-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};

package/src/components/dropdown-menu.tsx

@@ -0,0 +1,149 @@
+// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
+// (apps/web/src/components/ui/dropdown-menu.tsx). Full credit to the Better Auth team.
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { CheckIcon } from "lucide-react";
+import type * as React from "react";
+import { cn } from "../foundation/cn";
+
+function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element {
+	return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+}
+
+function DropdownMenuTrigger({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React.JSX.Element {
+	return (
+		<DropdownMenuPrimitive.Trigger
+			data-slot="dropdown-menu-trigger"
+			{...props}
+			className={cn("rounded-sm", props.className)}
+		/>
+	);
+}
+
+function DropdownMenuContent({
+	className,
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): React.JSX.Element {
+	return (
+		<DropdownMenuPrimitive.Portal>
+			<DropdownMenuPrimitive.Content
+				data-slot="dropdown-menu-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-background text-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+					className,
+				)}
+				{...props}
+			/>
+		</DropdownMenuPrimitive.Portal>
+	);
+}
+
+function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): React.JSX.Element {
+	return <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />;
+}
+
+function DropdownMenuItem({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+	inset?: boolean;
+}): React.JSX.Element {
+	return (
+		<DropdownMenuPrimitive.Item
+			data-slot="dropdown-menu-item"
+			data-inset={inset}
+			className={cn(
+				"focus:bg-accent [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuCheckboxItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): React.JSX.Element {
+	return (
+		<DropdownMenuPrimitive.CheckboxItem
+			data-slot="dropdown-menu-checkbox-item"
+			className={cn(
+				"focus:bg-accent relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<DropdownMenuPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</DropdownMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</DropdownMenuPrimitive.CheckboxItem>
+	);
+}
+
+function DropdownMenuLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+	inset?: boolean;
+}): React.JSX.Element {
+	return (
+		<DropdownMenuPrimitive.Label
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
+			className={cn(
+				"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React.JSX.Element {
+	return (
+		<DropdownMenuPrimitive.Separator
+			data-slot="dropdown-menu-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element {
+	return (
+		<span
+			data-slot="dropdown-menu-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	DropdownMenu,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuLabel,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+};

package/src/components/github-background.tsx

@@ -0,0 +1,280 @@
+// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
+// (apps/web/src/components/ui/github-background.tsx). Full credit to the Better Auth team.
+
+import type * as React from "react";
+import { useMemo } from "react";
+
+function createRng(seed: number) {
+	let s = seed;
+	return () => {
+		s = (s * 16807) % 2147483647;
+		return (s - 1) / 2147483646;
+	};
+}
+
+const LEVELS = [
+	"rgba(255,255,255,0.02)",
+	"rgba(255,255,255,0.10)",
+	"rgba(255,255,255,0.18)",
+	"rgba(255,255,255,0.28)",
+	"rgba(255,255,255,0.40)",
+];
+
+const CELL = 15;
+
+export function GitHubBackground(): React.JSX.Element {
+	const grid = useMemo(() => {
+		const rng = createRng(42);
+		const cells: { w: number; d: number; level: number }[] = [];
+		for (let w = 0; w < 52; w++) {
+			for (let d = 0; d < 7; d++) {
+				const r = rng();
+				const level =
+					r < 0.3 ? 0 : r < 0.5 ? 1 : r < 0.7 ? 2 : r < 0.85 ? 3 : 4;
+				cells.push({ w, d, level });
+			}
+		}
+		return cells;
+	}, []);
+
+	return (
+		<div
+			className="absolute inset-0 pointer-events-none overflow-hidden"
+			style={{ zIndex: 2 }}
+		>
+			{/* Radial mask — fades edges into the shader */}
+			<div
+				className="absolute inset-0"
+				style={{
+					maskImage: "radial-gradient(ellipse 85% 75% at 45% 35%, black 15%, transparent 60%)",
+					WebkitMaskImage:
+						"radial-gradient(ellipse 85% 75% at 45% 35%, black 15%, transparent 60%)",
+				}}
+			>
+				{/* ── Contribution Graph ── */}
+				<div
+					className="absolute"
+					style={{
+						top: "8%",
+						left: "50%",
+						transform: "translate(-50%, 0) perspective(500px) rotateX(30deg) rotateZ(-2deg) scale(1.3)",
+						transformOrigin: "center top",
+						opacity: 0.4,
+					}}
+				>
+					<svg
+						width={52 * CELL}
+						height={7 * CELL}
+						viewBox={`0 0 ${52 * CELL} ${7 * CELL}`}
+					>
+						{grid.map(({ w, d, level }, i) => (
+							<rect
+								key={i}
+								x={w * CELL}
+								y={d * CELL}
+								width={12}
+								height={12}
+								rx={2}
+								fill={LEVELS[level]}
+								opacity={0}
+							>
+								<animate
+									attributeName="opacity"
+									from="0"
+									to="1"
+									dur="0.5s"
+									begin={`${w * 0.04 + d * 0.015}s`}
+									fill="freeze"
+								/>
+							</rect>
+						))}
+					</svg>
+				</div>
+
+				{/* ── Git Network Graph ── */}
+				<svg
+					className="absolute inset-0 w-full h-full"
+					viewBox="0 0 400 900"
+					preserveAspectRatio="xMidYMid slice"
+					style={{ opacity: 0.45 }}
+				>
+					{/* Main branch */}
+					<line
+						x1="200"
+						y1="0"
+						x2="200"
+						y2="900"
+						stroke="rgba(255,255,255,0.15)"
+						strokeWidth="2"
+						pathLength={1}
+						className="git-line-anim"
+						style={{ animationDelay: "0.3s" }}
+					/>
+
+					{/* Feature branch 1 — forks right */}
+					<path
+						d="M 200 150 C 200 180, 280 200, 280 230 L 280 350 C 280 380, 200 395, 200 400"
+						stroke="rgba(255,255,255,0.12)"
+						strokeWidth="2"
+						fill="none"
+						pathLength={1}
+						className="git-line-anim"
+						style={{ animationDelay: "0.8s" }}
+					/>
+
+					{/* Feature branch 2 — forks left */}
+					<path
+						d="M 200 300 C 200 325, 130 340, 130 360 L 130 500 C 130 525, 200 540, 200 550"
+						stroke="rgba(255,255,255,0.10)"
+						strokeWidth="2"
+						fill="none"
+						pathLength={1}
+						className="git-line-anim"
+						style={{ animationDelay: "1.3s" }}
+					/>
+
+					{/* Hotfix branch — short fork right */}
+					<path
+						d="M 200 550 C 200 570, 260 580, 260 600 L 260 650 C 260 670, 200 680, 200 690"
+						stroke="rgba(255,255,255,0.08)"
+						strokeWidth="2"
+						fill="none"
+						pathLength={1}
+						className="git-line-anim"
+						style={{ animationDelay: "1.8s" }}
+					/>
+
+					{/* Feature branch 3 — wide fork left */}
+					<path
+						d="M 200 620 C 200 640, 110 660, 110 680 L 110 800 C 110 820, 200 835, 200 850"
+						stroke="rgba(255,255,255,0.07)"
+						strokeWidth="2"
+						fill="none"
+						pathLength={1}
+						className="git-line-anim"
+						style={{ animationDelay: "2.2s" }}
+					/>
+
+					{/* Commit nodes — main branch */}
+					{[80, 150, 230, 300, 400, 480, 550, 620, 690, 770, 850].map(
+						(y, i) => (
+							<circle
+								key={`m${i}`}
+								cx={200}
+								cy={y}
+								r={4}
+								fill="rgba(255,255,255,0.25)"
+								opacity={0}
+							>
+								<animate
+									attributeName="opacity"
+									from="0"
+									to="1"
+									dur="0.3s"
+									begin={`${0.5 + i * 0.15}s`}
+									fill="freeze"
+								/>
+							</circle>
+						),
+					)}
+
+					{/* Commit nodes — feature 1 */}
+					{[230, 280, 330].map((y, i) => (
+						<circle
+							key={`f1${i}`}
+							cx={280}
+							cy={y}
+							r={3.5}
+							fill="rgba(255,255,255,0.20)"
+							opacity={0}
+						>
+							<animate
+								attributeName="opacity"
+								from="0"
+								to="1"
+								dur="0.3s"
+								begin={`${1.0 + i * 0.2}s`}
+								fill="freeze"
+							/>
+						</circle>
+					))}
+
+					{/* Commit nodes — feature 2 */}
+					{[360, 420, 470].map((y, i) => (
+						<circle
+							key={`f2${i}`}
+							cx={130}
+							cy={y}
+							r={3.5}
+							fill="rgba(255,255,255,0.18)"
+							opacity={0}
+						>
+							<animate
+								attributeName="opacity"
+								from="0"
+								to="1"
+								dur="0.3s"
+								begin={`${1.5 + i * 0.2}s`}
+								fill="freeze"
+							/>
+						</circle>
+					))}
+
+					{/* Commit nodes — hotfix */}
+					{[600, 630, 660].map((y, i) => (
+						<circle
+							key={`hf${i}`}
+							cx={260}
+							cy={y}
+							r={3}
+							fill="rgba(255,255,255,0.15)"
+							opacity={0}
+						>
+							<animate
+								attributeName="opacity"
+								from="0"
+								to="1"
+								dur="0.3s"
+								begin={`${2.0 + i * 0.2}s`}
+								fill="freeze"
+							/>
+						</circle>
+					))}
+
+					{/* Commit nodes — feature 3 */}
+					{[680, 730, 780].map((y, i) => (
+						<circle
+							key={`f3${i}`}
+							cx={110}
+							cy={y}
+							r={3}
+							fill="rgba(255,255,255,0.12)"
+							opacity={0}
+						>
+							<animate
+								attributeName="opacity"
+								from="0"
+								to="1"
+								dur="0.3s"
+								begin={`${2.4 + i * 0.2}s`}
+								fill="freeze"
+							/>
+						</circle>
+					))}
+				</svg>
+			</div>
+
+			{/* CSS for stroke-dash draw animation */}
+			<style>{`
+				.git-line-anim {
+					stroke-dasharray: 1;
+					stroke-dashoffset: 1;
+					animation: gitDraw 2.5s ease-out forwards;
+				}
+				@keyframes gitDraw {
+					to { stroke-dashoffset: 0; }
+				}
+			`}</style>
+		</div>
+	);
+}