1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26

// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only

import { QuestionMarkCircledIcon } from "@radix-ui/react-icons";
import { IconButton, Dialog, Tooltip, VisuallyHidden } from "@radix-ui/themes";
import { type FC, type ReactNode } from "react";

export interface TriggerProps extends Omit<Dialog.TriggerProps, "children"> {
	/**
	 * ツールチップやスクリーンリーダー向けに表示されるテキスト。
	 */
	children: ReactNode;
}

export const Trigger: FC<TriggerProps> = ({ children, ...rest }) => {
	return (
		<Tooltip content={children} delayDuration={700}>
			<Dialog.Trigger {...rest}>
				<IconButton variant="ghost" size="1" color="gray">
					<QuestionMarkCircledIcon />
					<VisuallyHidden>{children}</VisuallyHidden>
				</IconButton>
			</Dialog.Trigger>
		</Tooltip>
	);
};