Sheet

import {
	Sheet,
	SheetTrigger,
	SheetContent,
	SheetHeader,
	SheetFooter,
	SheetTitle,
	SheetDescription,
	SheetClose,
	Button,
	Input,
} from "@work-rjkashyap/unified-ui";

<Sheet>
	<SheetTrigger asChild>
		<Button>Open Sheet</Button>
	</SheetTrigger>
	<SheetContent>
		<SheetHeader>
			<SheetTitle>Panel Title</SheetTitle>
			<SheetDescription>Optional description text.</SheetDescription>
		</SheetHeader>
		<div className="p-6">
			<p>Sheet content goes here.</p>
		</div>
		<SheetFooter>
			<SheetClose asChild>
				<Button variant="secondary">Close</Button>
			</SheetClose>
		</SheetFooter>
	</SheetContent>
</Sheet>

<SheetContent side="right" size="sm">   {/* 320px */}
<SheetContent side="right" size="md">   {/* 420px — default */}
<SheetContent side="right" size="lg">   {/* 560px */}
<SheetContent side="right" size="full"> {/* Full width/height */}

<SheetContent>
	{/* Header — title, description, close button */}
	<SheetHeader>
		<SheetTitle>Panel Title</SheetTitle>
		<SheetDescription>Description text</SheetDescription>
	</SheetHeader>

	{/* Body — your custom content (add your own padding) */}
	<div className="flex-1 overflow-y-auto p-6">
		<p>Scrollable content area</p>
	</div>

	{/* Footer — action buttons */}
	<SheetFooter>
		<SheetClose asChild>
			<Button variant="secondary">Cancel</Button>
		</SheetClose>
		<Button variant="primary">Save</Button>
	</SheetFooter>
</SheetContent>

<Sheet>
	<SheetTrigger asChild>
		<Button variant="ghost" iconOnly aria-label="Open menu">
			<MenuIcon className="size-4" />
		</Button>
	</SheetTrigger>
	<SheetContent side="left" size="sm">
		<SheetHeader>
			<SheetTitle>Navigation</SheetTitle>
		</SheetHeader>
		<nav className="flex flex-col gap-1 p-4">
			<a href="/" className="px-3 py-2 text-sm rounded-md hover:bg-muted">
				Home
			</a>
			<a
				href="/docs"
				className="px-3 py-2 text-sm rounded-md hover:bg-muted"
			>
				Documentation
			</a>
			<a
				href="/components"
				className="px-3 py-2 text-sm rounded-md hover:bg-muted"
			>
				Components
			</a>
			<a
				href="/examples"
				className="px-3 py-2 text-sm rounded-md hover:bg-muted"
			>
				Examples
			</a>
		</nav>
	</SheetContent>
</Sheet>

<Sheet>
	<SheetTrigger asChild>
		<Button variant="secondary" iconLeft={<SettingsIcon />}>
			Settings
		</Button>
	</SheetTrigger>
	<SheetContent side="right" size="md">
		<SheetHeader>
			<SheetTitle>Project Settings</SheetTitle>
			<SheetDescription>
				Update your project configuration. Changes are saved when you
				click Save.
			</SheetDescription>
		</SheetHeader>
		<div className="flex-1 overflow-y-auto p-6 flex flex-col gap-4">
			<div className="flex flex-col gap-1.5">
				<label className="text-sm font-medium">Project Name</label>
				<Input placeholder="My Project" />
			</div>
			<div className="flex flex-col gap-1.5">
				<label className="text-sm font-medium">Description</label>
				<Textarea placeholder="What is this project about?" />
			</div>
			<div className="flex flex-col gap-1.5">
				<label className="text-sm font-medium">Visibility</label>
				<Select>
					<SelectTrigger>
						<SelectValue placeholder="Select visibility" />
					</SelectTrigger>
					<SelectContent>
						<SelectItem value="public">Public</SelectItem>
						<SelectItem value="private">Private</SelectItem>
					</SelectContent>
				</Select>
			</div>
		</div>
		<SheetFooter>
			<SheetClose asChild>
				<Button variant="secondary">Cancel</Button>
			</SheetClose>
			<Button variant="primary">Save Changes</Button>
		</SheetFooter>
	</SheetContent>
</Sheet>

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

<Sheet open={open} onOpenChange={setOpen}>
	<SheetTrigger asChild>
		<Button>Open</Button>
	</SheetTrigger>
	<SheetContent>
		<SheetHeader>
			<SheetTitle>Controlled Sheet</SheetTitle>
		</SheetHeader>
		<div className="p-6">
			<p>This sheet is controlled externally.</p>
			<Button
				variant="primary"
				onClick={() => {
					handleSave();
					setOpen(false);
				}}
			>
				Save & Close
			</Button>
		</div>
	</SheetContent>
</Sheet>;