Core building blocks for your design system

// Add styles with your preferred CSS technology
const TooltipContent = styled(Tooltip.Content, {
	backgroundColor: "black",
	borderRadius: "3px",
	padding: "5px"
});

const PopoverContent = styled(Popover.Content, {
	backgroundColor: "white",
	boxShadow: "0 2px 10px -3px rgb(0 0 0 / 20%)",
	borderRadius: "3px",
});

const DialogContent = styled(Dialog.Content, {
	backgroundColor: "white",
	boxShadow: "0 3px 15px -4px rgb(0 0 0 / 30%)",
	borderRadius: "5px",
});	

// Compose a custom Tooltip component
export const StatusTooltip = ({ state, label }) => {
	return (
		<Tooltip.Root>
			<Tooltip.Trigger asChild>
				<Text>
					<Status variant={state} />
				</Text>
			</Tooltip.Trigger>
			<Tooltip.Portal>
				<TooltipContent>
					<Tooltip.Arrow />
					{label}
				</TooltipContent>
			</Tooltip.Portal>
		</Tooltip.Root>
	);
};	// Compose a Popover with custom focus and positioning
export const StatusPopover = ({ children }) => {
	const popoverCloseButton = React.useRef(null);
	return (
		<Popover.Root>
			<Popover.Trigger>View status</Popover.Trigger>
			<Popover.Portal>
				<PopoverContent
					align="start"
					collisionPadding={10}
					onOpenAutoFocus={(event) => {
						// Focus the close button when popover opens
						popoverCloseButton.current?.focus();
						event.preventDefault();
					}}
				>
					{children}
					<Popover.Close ref={popoverCloseButton}>
						Close
					</Popover.Close>
				</PopoverContent>
			</Popover.Portal>
		</Popover.Root>
	);
};	// Compose a Dialog with custom focus management
export const InfoDialog = ({ children }) => {
	const dialogCloseButton = React.useRef(null);
	return (
		<Dialog.Root>
			<Dialog.Trigger>View details</Dialog.Trigger>
			<Dialog.Overlay />
			<Dialog.Portal>
				<DialogContent
					onOpenAutoFocus={(event) => {
						// Focus the close button when dialog opens
						dialogCloseButton.current?.focus();
						event.preventDefault();
					}}
				>
					{children}
					<Dialog.Close ref={dialogCloseButton}>
						Close
					</Dialog.Close>
				</DialogContent>
			</Dialog.Portal>
		</Dialog.Root>
	);
};