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

package/src/components/halftone-background.tsx

@@ -0,0 +1,289 @@
+// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
+// (apps/web/src/components/ui/halftone-background.tsx). Full credit to the Better Auth team.
+
+import type * as React from "react";
+import { useEffect, useRef } from "react";
+
+const VERTEX_SHADER = `
+attribute vec2 a_position;
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}`;
+
+const FRAGMENT_SHADER = `
+precision highp float;
+
+uniform float u_time;
+uniform vec2 u_resolution;
+uniform vec2 u_mouse;
+uniform float u_click;
+uniform vec2 u_clickPos;
+
+vec3 mod289(vec3 x) { return x - floor(x * (1.0/289.0)) * 289.0; }
+vec2 mod289(vec2 x) { return x - floor(x * (1.0/289.0)) * 289.0; }
+vec3 permute(vec3 x) { return mod289(((x*34.0)+1.0)*x); }
+
+float snoise(vec2 v) {
+  const vec4 C = vec4(
+    0.211324865405187,
+    0.366025403784439,
+   -0.577350269189626,
+    0.024390243902439
+  );
+  vec2 i = floor(v + dot(v, C.yy));
+  vec2 x0 = v - i + dot(i, C.xx);
+  vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+  vec4 x12 = x0.xyxy + C.xxzz;
+  x12.xy -= i1;
+  i = mod289(i);
+  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
+  vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);
+  m = m*m;
+  m = m*m;
+  vec3 x = 2.0 * fract(p * C.www) - 1.0;
+  vec3 h = abs(x) - 0.5;
+  vec3 ox = floor(x + 0.5);
+  vec3 a0 = x - ox;
+  m *= 1.79284291400159 - 0.85373472095314 * (a0*a0 + h*h);
+  vec3 g;
+  g.x = a0.x * x0.x + h.x * x0.y;
+  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+  return 130.0 * dot(m, g);
+}
+
+float fbm(vec2 p) {
+  float value = 0.0;
+  float amp = 0.5;
+  float freq = 1.0;
+  for (int i = 0; i < 6; i++) {
+    value += amp * snoise(p * freq);
+    freq *= 2.0;
+    amp *= 0.5;
+  }
+  return value;
+}
+
+float hash21(vec2 p) {
+  p = fract(p * vec2(233.34, 851.73));
+  p += dot(p, p + 23.45);
+  return fract(p.x * p.y);
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+  float aspect = u_resolution.x / u_resolution.y;
+  float time = u_time;
+  float t = time * 0.04;
+
+  vec2 ap = vec2(uv.x * aspect, uv.y);
+
+  // ═══ SHARED MOUSE WARP ═══
+  vec2 scaledP = ap * 2.5;
+  vec2 mUV = u_mouse;
+  mUV.x *= aspect;
+  mUV *= 2.5;
+  vec2 mDiff = scaledP - mUV;
+  float mDist = length(mDiff);
+  vec2 warp = vec2(0.0);
+  if (u_mouse.x > 0.0 && mDist < 0.5) {
+    warp = normalize(mDiff) * smoothstep(0.5, 0.0, mDist) * 0.2;
+  }
+  if (u_click > 0.01) {
+    vec2 cUV = u_clickPos;
+    cUV.x *= aspect;
+    cUV *= 2.5;
+    vec2 cD = scaledP - cUV;
+    float cDist = length(cD);
+    warp += normalize(cD + 0.001) * sin(cDist * 12.0 - time * 8.0) * u_click * 0.4 * exp(-cDist * 2.0);
+  }
+
+  // ═══ NOISE LAYER ═══
+  vec2 np = scaledP + warp;
+  vec2 q = vec2(fbm(np + t * 0.3), fbm(np + vec2(5.2, 1.3) + t * 0.2));
+  vec2 r = vec2(
+    fbm(np + 4.0 * q + vec2(1.7, 9.2) + t * 0.15),
+    fbm(np + 4.0 * q + vec2(8.3, 2.8) + t * 0.12)
+  );
+  float f = fbm(np + 4.0 * r);
+  float noise = clamp(f*f*f + 0.6*f*f + 0.5*f, 0.0, 1.0) * 0.15;
+
+  // ═══ CONTRIBUTION GRID ═══
+  vec2 gp = ap;
+  gp += vec2(snoise(ap * 3.0 + t), snoise(ap * 3.0 + t + 50.0)) * 0.004;
+  gp += warp * 0.04;
+  gp += vec2(t * 0.2, t * 0.12);
+
+  float cellTotal = 0.025;
+  vec2 cellId = floor(gp / cellTotal);
+  vec2 cellUV = fract(gp / cellTotal);
+
+  float pad = 0.10;
+  float edge = 0.04;
+  float inX = smoothstep(pad - edge, pad + edge, cellUV.x)
+            * (1.0 - smoothstep(1.0 - pad - edge, 1.0 - pad + edge, cellUV.x));
+  float inY = smoothstep(pad - edge, pad + edge, cellUV.y)
+            * (1.0 - smoothstep(1.0 - pad - edge, 1.0 - pad + edge, cellUV.y));
+  float inSquare = inX * inY;
+
+  float hVal = hash21(cellId);
+  float level = hVal < 0.35 ? 0.0 : (hVal - 0.35) / 0.65;
+  level *= level;
+
+  vec2 fp = uv - vec2(0.45, 0.55);
+  float gFade = max(1.0 - smoothstep(0.15, 0.45, length(fp * vec2(1.3, 1.6))), 0.0);
+
+  float gridReveal = smoothstep(0.5, 3.0, time);
+  float grid = inSquare * level * gFade * gridReveal * 0.10;
+
+  // ═══ COMPOSE ═══
+  vec2 vc = uv - 0.5;
+  float vignette = 1.0 - dot(vc, vc) * 0.3;
+
+  float col = noise * vignette + grid;
+  gl_FragColor = vec4(vec3(col), 1.0);
+}`;
+
+export function HalftoneBackground(): React.JSX.Element {
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+	const wrapperRef = useRef<HTMLDivElement>(null);
+	const frameRef = useRef<number>(0);
+	const mouseRef = useRef({ x: -1, y: -1 });
+	const smoothMouseRef = useRef({ x: -1, y: -1 });
+	const clickRef = useRef({ strength: 0, x: 0, y: 0 });
+
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		const wrapper = wrapperRef.current;
+		if (!canvas || !wrapper) return;
+
+		const gl = canvas.getContext("webgl", {
+			alpha: false,
+			antialias: false,
+			preserveDrawingBuffer: false,
+		});
+		if (!gl) return;
+
+		function createShader(type: number, source: string) {
+			const shader = gl!.createShader(type)!;
+			gl!.shaderSource(shader, source);
+			gl!.compileShader(shader);
+			return shader;
+		}
+
+		const vs = createShader(gl.VERTEX_SHADER, VERTEX_SHADER);
+		const fs = createShader(gl.FRAGMENT_SHADER, FRAGMENT_SHADER);
+
+		const program = gl.createProgram()!;
+		gl.attachShader(program, vs);
+		gl.attachShader(program, fs);
+		gl.linkProgram(program);
+		gl.useProgram(program);
+
+		const buffer = gl.createBuffer();
+		gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+		gl.bufferData(
+			gl.ARRAY_BUFFER,
+			new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
+			gl.STATIC_DRAW,
+		);
+
+		const aPosition = gl.getAttribLocation(program, "a_position");
+		gl.enableVertexAttribArray(aPosition);
+		gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);
+
+		const uTime = gl.getUniformLocation(program, "u_time");
+		const uResolution = gl.getUniformLocation(program, "u_resolution");
+		const uMouse = gl.getUniformLocation(program, "u_mouse");
+		const uClick = gl.getUniformLocation(program, "u_click");
+		const uClickPos = gl.getUniformLocation(program, "u_clickPos");
+
+		const startTime = performance.now();
+
+		const resize = () => {
+			const dpr = Math.min(window.devicePixelRatio || 1, 2);
+			const scale = 0.5 * dpr;
+			canvas.width = canvas.offsetWidth * scale;
+			canvas.height = canvas.offsetHeight * scale;
+			gl.viewport(0, 0, canvas.width, canvas.height);
+		};
+
+		resize();
+		window.addEventListener("resize", resize);
+
+		const onMouseMove = (e: MouseEvent) => {
+			const rect = wrapper.getBoundingClientRect();
+			mouseRef.current.x = (e.clientX - rect.left) / rect.width;
+			mouseRef.current.y = 1.0 - (e.clientY - rect.top) / rect.height;
+		};
+
+		const onMouseLeave = () => {
+			mouseRef.current.x = -1;
+			mouseRef.current.y = -1;
+		};
+
+		const onClick = (e: MouseEvent) => {
+			const rect = wrapper.getBoundingClientRect();
+			clickRef.current.x = (e.clientX - rect.left) / rect.width;
+			clickRef.current.y = 1.0 - (e.clientY - rect.top) / rect.height;
+			clickRef.current.strength = 1.0;
+		};
+
+		window.addEventListener("mousemove", onMouseMove, { passive: true });
+		wrapper.addEventListener("mouseleave", onMouseLeave);
+		wrapper.addEventListener("click", onClick);
+
+		const draw = () => {
+			const elapsed = (performance.now() - startTime) / 1000;
+
+			const lerp = 0.08;
+			const target = mouseRef.current;
+			const smooth = smoothMouseRef.current;
+			if (target.x < 0) {
+				smooth.x += (target.x - smooth.x) * 0.02;
+				smooth.y += (target.y - smooth.y) * 0.02;
+			} else {
+				smooth.x += (target.x - smooth.x) * lerp;
+				smooth.y += (target.y - smooth.y) * lerp;
+			}
+
+			clickRef.current.strength *= 0.96;
+
+			gl.uniform1f(uTime, elapsed);
+			gl.uniform2f(uResolution, canvas.width, canvas.height);
+			gl.uniform2f(uMouse, smooth.x, smooth.y);
+			gl.uniform1f(uClick, clickRef.current.strength);
+			gl.uniform2f(uClickPos, clickRef.current.x, clickRef.current.y);
+			gl.drawArrays(gl.TRIANGLES, 0, 6);
+			frameRef.current = requestAnimationFrame(draw);
+		};
+
+		frameRef.current = requestAnimationFrame(draw);
+
+		return () => {
+			cancelAnimationFrame(frameRef.current);
+			window.removeEventListener("resize", resize);
+			window.removeEventListener("mousemove", onMouseMove);
+			wrapper.removeEventListener("mouseleave", onMouseLeave);
+			wrapper.removeEventListener("click", onClick);
+			gl.deleteProgram(program);
+			gl.deleteShader(vs);
+			gl.deleteShader(fs);
+			gl.deleteBuffer(buffer);
+		};
+	}, []);
+
+	return (
+		<div
+			ref={wrapperRef}
+			className="absolute inset-0 overflow-hidden"
+			style={{ background: "var(--shader-bg)" }}
+			aria-hidden="true"
+		>
+			<canvas
+				ref={canvasRef}
+				className="w-full h-full"
+				style={{ filter: "var(--shader-filter)" }}
+			/>
+		</div>
+	);
+}

package/src/components/input-group.tsx

@@ -0,0 +1,175 @@
+// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
+// (apps/web/src/components/ui/input-group.tsx). Full credit to the Better Auth team.
+
+import type * as React from "react";
+import type { ComponentProps } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ClassProp } from "class-variance-authority/types";
+
+import { cn } from "../foundation/cn";
+import { Button } from "./button";
+import { Input } from "./input";
+import { Textarea } from "./textarea";
+
+function InputGroup({ className, ...props }: ComponentProps<"div">): React.JSX.Element {
+	return (
+		<div
+			data-slot="input-group"
+			role="group"
+			className={cn(
+				"group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30",
+				"h-9 min-w-0 has-[>textarea]:h-auto",
+
+				// Variants based on alignment.
+				"has-[>[data-align=inline-start]]:[&>input]:pl-2",
+				"has-[>[data-align=inline-end]]:[&>input]:pr-2",
+				"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+				"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+				// Focus state.
+				"has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
+
+				// Error state.
+				"has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+const inputGroupAddonVariants: (
+	props?:
+		| ({
+				align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+		  } & ClassProp)
+		| undefined,
+) => string = cva(
+	"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+	{
+		variants: {
+			align: {
+				"inline-start":
+					"order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+				"inline-end":
+					"order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+				"block-start":
+					"order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+				"block-end":
+					"order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
+			},
+		},
+		defaultVariants: {
+			align: "inline-start",
+		},
+	},
+);
+
+function InputGroupAddon({
+	className,
+	align = "inline-start",
+	...props
+}: ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element {
+	return (
+		<div
+			role="group"
+			data-slot="input-group-addon"
+			data-align={align}
+			className={cn(inputGroupAddonVariants({ align }), className)}
+			onClick={(e) => {
+				if ((e.target as HTMLElement).closest("button")) {
+					return;
+				}
+				e.currentTarget.parentElement?.querySelector("input")?.focus();
+			}}
+			{...props}
+		/>
+	);
+}
+
+const inputGroupButtonVariants: (
+	props?:
+		| ({
+				size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+		  } & ClassProp)
+		| undefined,
+) => string = cva("flex items-center gap-2 text-sm shadow-none", {
+	variants: {
+		size: {
+			xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+			sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+			"icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+			"icon-sm": "size-8 p-0 has-[>svg]:p-0",
+		},
+	},
+	defaultVariants: {
+		size: "xs",
+	},
+});
+
+function InputGroupButton({
+	className,
+	type = "button",
+	variant = "ghost",
+	size = "xs",
+	...props
+}: Omit<ComponentProps<typeof Button>, "size"> &
+	VariantProps<typeof inputGroupButtonVariants>): React.JSX.Element {
+	return (
+		<Button
+			type={type}
+			data-size={size}
+			variant={variant}
+			className={cn(inputGroupButtonVariants({ size }), className)}
+			{...props}
+		/>
+	);
+}
+
+function InputGroupText({ className, ...props }: ComponentProps<"span">): React.JSX.Element {
+	return (
+		<span
+			className={cn(
+				"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function InputGroupInput({ className, ...props }: ComponentProps<"input">): React.JSX.Element {
+	return (
+		<Input
+			data-slot="input-group-control"
+			className={cn(
+				"flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function InputGroupTextarea({ className, ...props }: ComponentProps<"textarea">): React.JSX.Element {
+	return (
+		<Textarea
+			data-slot="input-group-control"
+			className={cn(
+				"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButton,
+	InputGroupText,
+	InputGroupInput,
+	InputGroupTextarea,
+};

package/src/components/input.tsx

@@ -0,0 +1,25 @@
+// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
+// (apps/web/src/components/ui/input.tsx). Full credit to the Better Auth team.
+
+import type * as React from "react";
+import type { ComponentProps } from 'react';
+
+import { cn } from '../foundation/cn';
+
+function Input({ className, type, ...props }: ComponentProps<'input'>): React.JSX.Element {
+	return (
+		<input
+			type={type}
+			data-slot="input"
+			className={cn(
+				"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+				"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+				"aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Input };

package/src/components/live-duration.tsx

@@ -0,0 +1,70 @@
+// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
+// (apps/web/src/components/ui/live-duration.tsx). Full credit to the Better Auth team.
+
+import type * as React from "react";
+import { useState, useEffect } from "react";
+
+// Inlined from "@/lib/utils" (formatDuration) — only this helper is used here.
+function formatDuration(startedAt: string | null, completedAt: string | null): string {
+	if (!startedAt) return "";
+	const start = new Date(startedAt);
+	const end = completedAt ? new Date(completedAt) : new Date();
+	const totalSeconds = Math.max(0, Math.floor((end.getTime() - start.getTime()) / 1000));
+	const hours = Math.floor(totalSeconds / 3600);
+	const minutes = Math.floor((totalSeconds % 3600) / 60);
+	const seconds = totalSeconds % 60;
+	if (hours > 0) return `${hours}h ${minutes}m`;
+	if (minutes > 0) return `${minutes}m ${seconds}s`;
+	return `${seconds}s`;
+}
+
+// Inlined from "@/lib/live-tick".
+// Shared tick for LiveDuration components. One interval drives all subscribers
+// instead of each component running its own 1s interval.
+const callbacks = new Set<() => void>();
+const tickState: { intervalId: ReturnType<typeof setInterval> | null } = {
+	intervalId: null,
+};
+
+function subscribeLiveTick(callback: () => void): () => void {
+	callbacks.add(callback);
+	if (tickState.intervalId === null) {
+		tickState.intervalId = setInterval(() => {
+			callbacks.forEach((cb) => cb());
+		}, 1000);
+	}
+	return () => {
+		callbacks.delete(callback);
+		if (callbacks.size === 0 && tickState.intervalId !== null) {
+			clearInterval(tickState.intervalId);
+			tickState.intervalId = null;
+		}
+	};
+}
+
+interface LiveDurationProps {
+	startedAt: string | null;
+	completedAt?: string | null;
+	className?: string;
+}
+
+export function LiveDuration({ startedAt, completedAt, className }: LiveDurationProps): React.ReactNode {
+	// tick forces re-renders when subscribeLiveTick fires; value is unused in render
+	const [, setTick] = useState(0);
+
+	useEffect(() => {
+		if (!startedAt || completedAt != null) return;
+		setTick(0);
+		return subscribeLiveTick(() => setTick((t) => t + 1));
+	}, [startedAt, completedAt]);
+
+	if (!startedAt) return null;
+
+	const formatted = formatDuration(startedAt, completedAt ?? null);
+
+	return (
+		<span className={className} suppressHydrationWarning>
+			{formatted}
+		</span>
+	);
+}

package/src/components/logo.tsx

@@ -0,0 +1,20 @@
+// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
+// (apps/web/src/components/ui/logo.tsx). Full credit to the Better Auth team.
+import type * as React from "react";
+import { cn } from '../foundation/cn';
+
+export function Logo({ className }: { className?: string }): React.JSX.Element {
+	return (
+		<span className={cn("font-mono text-sm font-medium tracking-tight", className)}>
+			BETTER-HUB.
+		</span>
+	);
+}
+
+export function LogoMark({ className }: { className?: string }): React.JSX.Element {
+	return (
+		<span className={cn("font-mono text-sm font-bold tracking-tight", className)}>
+			b.
+		</span>
+	);
+}

package/src/components/popover.tsx

@@ -0,0 +1,82 @@
+// Adapted from better-hub by Better Auth — https://github.com/better-auth/better-hub
+// (apps/web/src/components/ui/popover.tsx). Full credit to the Better Auth team.
+
+import type * as React from "react";
+import type { ComponentProps } from "react";
+import { Popover as PopoverPrimitive } from "radix-ui";
+
+import { cn } from "../foundation/cn";
+
+function Popover({ ...props }: ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element {
+	return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element {
+	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+	className,
+	align = "center",
+	sideOffset = 4,
+	...props
+}: ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element {
+	return (
+		<PopoverPrimitive.Portal>
+			<PopoverPrimitive.Content
+				data-slot="popover-content"
+				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",
+					className,
+				)}
+				{...props}
+			/>
+		</PopoverPrimitive.Portal>
+	);
+}
+
+function PopoverAnchor({ ...props }: ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element {
+	return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+function PopoverHeader({ className, ...props }: ComponentProps<"div">): React.JSX.Element {
+	return (
+		<div
+			data-slot="popover-header"
+			className={cn("flex flex-col gap-1 text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function PopoverTitle({ className, ...props }: ComponentProps<"h2">): React.JSX.Element {
+	return (
+		<div
+			data-slot="popover-title"
+			className={cn("font-medium", className)}
+			{...props}
+		/>
+	);
+}
+
+function PopoverDescription({ className, ...props }: ComponentProps<"p">): React.JSX.Element {
+	return (
+		<p
+			data-slot="popover-description"
+			className={cn("text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Popover,
+	PopoverTrigger,
+	PopoverContent,
+	PopoverAnchor,
+	PopoverHeader,
+	PopoverTitle,
+	PopoverDescription,
+};