Accordion

[synuns]

Component Function Definition

Accordion is a collection of vertically stacked interactive headings, where each heading can show or hide its associated content section.

주요 기능:

• Single/multiple item expansion (type= 'single' | 'multiple')
• User interaction animation support

Design Requirements

• default design
  • Accordion.Item
    • border-radius: 12px
    • padding: 20px
  • Accordion.Header
    • font-weight: 700
  • Accordion.Content
    • font-weight: 600
    • border-radius: 8px
• animation
  • Arrow icon rotates 180 degrees when opening and closing

Component Specifications

interface

anatomy

import { Accordion } from "@sipe-team/accordion";

export default () => (
	<Accordion.Root>
		<Accordion.Item>
			<Accordion.Header>
				<Accordion.Trigger />
			</Accordion.Header>
			<Accordion.Content />
		</Accordion.Item>
	</Accordion.Root>
);

Technical Considerations

• Support for compound components pattern with composable interface
• Compliance with WAI-ARIA design patterns

Reference Materials

• Radix UI Accordion
• Chakra UI Accordion
• WAI-ARIA Accordion Pattern

Additional Discussion Points

• Need to add media queries for responsive design
• Add Keyboard Interaction support