\n \n \n Is it accessible?\n \n Yes. It adheres to the WAI-ARIA design pattern.\n \n \n \n Is it styled?\n \n Yes. It comes with default styles that matches the other components'\n aesthetic.\n \n \n \n Is it animated?\n \n Yes. It's animated by default, but you can disable it if you prefer.\n \n \n \n
\n );\n}\n```\n\n### Alert Dialog\n\n```tsx\nimport { AlertDialog } from \"@anjun-brasil/design-system\";\n\nfunction Example() {\n return (\n \n \n \n \n \n \n Are you sure absolutely sure?\n \n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n \n \n \n Cancel\n Yes, delete it!\n \n \n \n );\n}\n```\n\n### Avatar\n\n```tsx\nimport { Avatar } from \"@anjun-brasil/design-system\";\n\nfunction Example() {\n return (\n \n \n RC\n \n );\n}\n```\n\n### Button\n\n```tsx\nimport { Button } from \"@anjun-brasil/design-system\";\n\nfunction Example() {\n return ;\n}\n```\n\n### Checkbox\n\n```tsx\nimport { Checkbox } from \"@anjun-brasil/design-system\";\n\nfunction Example() {\n return ;\n}\n```\n\n### Command\n\n```tsx\nimport { useState, useEffect } from \"react\";\nimport { Command } from \"@anjun-brasil/design-system\";\n\nfunction Example() {\n const [open, setOpen] = useState(false);\n\n useEffect(() => {\n const down = (e: KeyboardEvent) => {\n if (e.key === \"k\" && e.metaKey) {\n setOpen((open) => !open);\n }\n };\n\n document.addEventListener(\"keydown\", down);\n return () => document.removeEventListener(\"keydown\", down);\n }, []);\n\n return (\n