@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
70 lines (69 loc) • 2.56 kB
TypeScript
import { Accordion as AccordionPrimitive } from 'radix-ui';
import { ComponentProps } from 'react';
/**
* An accordion is a vertically stacked set of interactive headings that each reveal a section of content.
*
* For unstyled variant just for one trigger, see {@link CollapsibleRoot|Collapsible}.
*
* @example
* ```tsx
* // Just one item can be opened at once
* <AccordionRoot type="single" collapsible>
* <AccordionItem value="item-1">
* <AccordionTrigger>Accessibility</AccordionTrigger>
* <AccordionContent>It adheres to the WAI-ARIA design pattern.</AccordionContent>
* </AccordionItem>
* <AccordionItem value="item-2">
* <AccordionTrigger>Styles</AccordionTrigger>
* <AccordionContent>It comes with default styling.</AccordionContent>
* </AccordionItem>
* </Accordion>
* ```
*
* @example
* ```tsx
* // Multiple items can be opened simultaneously
* <AccordionRoot type="multiple">
* <AccordionItem value="item-1">...</AccordionItem>
* <AccordionItem value="item-2">...</AccordionItem>
* </Accordion>
* ```
*/
export declare const AccordionRoot: (props: ComponentProps<typeof AccordionPrimitive.Root>) => import("react").JSX.Element;
/**
* A single item within an accordion. Must be a direct child of `Accordion`.
* Each item needs a unique `value` prop to identify it.
*
* @example
* ```tsx
* <AccordionItem value="item-1">
* <AccordionTrigger>Trigger text</AccordionTrigger>
* <AccordionContent>Content</AccordionContent>
* </AccordionItem>
* ```
*/
export declare const AccordionItem: ({ className, ...props }: ComponentProps<typeof AccordionPrimitive.Item>) => import("react").JSX.Element;
/**
* The trigger button that toggles the expanded state of an accordion item.
* Must be a direct child of {@link AccordionItem}.
*
* @example
* ```tsx
* <AccordionTrigger>Section title</AccordionTrigger>
* ```
*/
export declare const AccordionTrigger: ({ className, children, ...props }: ComponentProps<typeof AccordionPrimitive.Trigger>) => import("react").JSX.Element;
/**
* The expandable content section of an accordion item.
* Must be a direct child of {@link AccordionItem}.
*
* Features smooth animation through the {@link CollapsiblePrimitive} component.
*
* @example
* ```tsx
* <AccordionContent>
* Content that will be revealed when the accordion item is expanded.
* </AccordionContent>
* ```
*/
export declare const AccordionContent: ({ className, children, ...props }: ComponentProps<typeof AccordionPrimitive.Content>) => import("react").JSX.Element;