Popover

import {
	Popover,
	PopoverTrigger,
	PopoverContent,
	PopoverClose,
	PopoverArrow,
	Button,
	Input,
} from "@work-rjkashyap/unified-ui";

<Popover>
	<PopoverTrigger asChild>
		<Button>Open</Button>
	</PopoverTrigger>
	<PopoverContent>
		<p>Popover content goes here.</p>
	</PopoverContent>
</Popover>

<PopoverContent side="top">     {/* Above the trigger */}
<PopoverContent side="right">   {/* To the right */}
<PopoverContent side="bottom">  {/* Below — default */}
<PopoverContent side="left">    {/* To the left */}

{/* Alignment within the side */}
<PopoverContent side="bottom" align="start">  {/* Left-aligned */}
<PopoverContent side="bottom" align="center"> {/* Centered — default */}
<PopoverContent side="bottom" align="end">    {/* Right-aligned */}

<PopoverContent>
	<PopoverArrow />
	<p>Content with explicit arrow component.</p>
</PopoverContent>

<Popover>
	<PopoverTrigger asChild>
		<Button>Settings</Button>
	</PopoverTrigger>
	<PopoverContent showClose arrow>
		<p>Full-featured popover with arrow and close button.</p>
	</PopoverContent>
</Popover>

<Popover>
	<PopoverTrigger asChild>
		<Button variant="secondary">Edit Name</Button>
	</PopoverTrigger>
	<PopoverContent showClose>
		<div className="flex flex-col gap-3">
			<div className="space-y-1">
				<h4 className="text-sm font-semibold">Edit display name</h4>
				<p className="text-xs text-muted-foreground">
					This name will be visible to other users.
				</p>
			</div>
			<Input placeholder="Display name" size="sm" />
			<div className="flex justify-end gap-2">
				<PopoverClose asChild>
					<Button variant="ghost" size="sm">
						Cancel
					</Button>
				</PopoverClose>
				<Button variant="primary" size="sm">
					Save
				</Button>
			</div>
		</div>
	</PopoverContent>
</Popover>

{
	/* Default offset */
}
<PopoverContent sideOffset={4}>...</PopoverContent>;

{
	/* Larger offset */
}
<PopoverContent sideOffset={12}>...</PopoverContent>;

const [open, setOpen] = useState(false);

<Popover open={open} onOpenChange={setOpen}>
	<PopoverTrigger asChild>
		<Button>Controlled</Button>
	</PopoverTrigger>
	<PopoverContent>
		<p>This popover is controlled externally.</p>
		<Button variant="primary" size="sm" onClick={() => setOpen(false)}>
			Done
		</Button>
	</PopoverContent>
</Popover>;

<Popover>
	<PopoverTrigger asChild>
		<button
			className="size-8 rounded-md border border-border"
			style={{ backgroundColor: color }}
			aria-label="Choose color"
		/>
	</PopoverTrigger>
	<PopoverContent side="bottom" align="start">
		<div className="grid grid-cols-5 gap-2">
			{colors.map((c) => (
				<button
					key={c}
					className="size-6 rounded-sm border border-border"
					style={{ backgroundColor: c }}
					onClick={() => setColor(c)}
					aria-label={c}
				/>
			))}
		</div>
	</PopoverContent>
</Popover>