@stratakit/structures
Version:
Medium-sized component structures for the Strata design system
252 lines (251 loc) • 9.42 kB
TypeScript
import type { BaseProps } from "@stratakit/foundations/secret-internals";
interface AccordionItemProps extends BaseProps {
/**
* The accordion item’s initial open state.
*
* @default false
*/
defaultOpen?: boolean;
/**
* The accordion item’s controlled open state.
*
* @default false
*/
open?: boolean;
/**
* Callback fired when the accordion item is opened.
*
* Should be used with the `open` prop.
*/
setOpen?: (open: boolean) => void;
}
/**
* An item within an accordion. Disclosed content with a label.
*
* Bare minimum example:
* ```tsx
* <AccordionItem.Root>
* <AccordionItem.Header>
* <AccordionItem.Marker />
* <AccordionItem.Button>
* <AccordionItem.Label>Label</AccordionItem.Label>
* </AccordionItem.Button>
* </AccordionItem.Header>
* <AccordionItem.Content>Body</AccordionItem.Content>
* </AccordionItem.Root>
* ```
*
* If the accordion item discloses a significant section of the page, it may be
* desirable to markup its label as a heading for accessibility purposes (e.g.
* screen reader users often navigate by heading). For those cases, you can wrap
* the `AccordionItem.Button` component with an `AccordionItem.Heading`
* component and use its `render` prop for rendering an HTML heading element.
* ```tsx
* <AccordionItem.Root>
* <AccordionItem.Header>
* <AccordionItem.Marker />
* <AccordionItem.Heading render={<h2 />}>
* <AccordionItem.Button>
* <AccordionItem.Label>Label</AccordionItem.Label>
* </AccordionItem.Button>
* </AccordionItem.Heading>
* </AccordionItem.Header>
* <AccordionItem.Content>Body</AccordionItem.Content>
* </AccordionItem.Root>
* ```
*
* Example with a decoration:
* ```tsx
* <AccordionItem.Root>
* <AccordionItem.Header>
* <AccordionItem.Marker />
* <AccordionItem.Decoration render={<Icon href={placeholder} />} />
* <AccordionItem.Button>
* <AccordionItem.Label>Label</AccordionItem.Label>
* </AccordionItem.Button>
* </AccordionItem.Header>
* <AccordionItem.Content>Body</AccordionItem.Content>
* </AccordionItem.Root>
* ```
*/
declare const AccordionItemRoot: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
/**
* The always visible header of an accordion item.
*
* Must include an `AccordionItem.Button` and `AccordionItem.Marker` as a direct
* descendants.
*
* Example:
* ```tsx
* <AccordionItem.Root>
* <AccordionItem.Header>
* <AccordionItem.Marker />
* <AccordionItem.Button>
* <AccordionItem.Label>Label</AccordionItem.Label>
* </AccordionItem.Button>
* </AccordionItem.Header>
* <AccordionItem.Content>Body</AccordionItem.Content>
* </AccordionItem.Root>
* ```
*/
declare const AccordionItemHeader: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
/**
* The accordion item button.
*
* Must be a direct descendant of `AccordionItem.Header`.
*
* Example:
* ```tsx
* <AccordionItem.Header>
* <AccordionItem.Marker />
* <AccordionItem.Button>
* <AccordionItem.Label>Label</AccordionItem.Label>
* </AccordionItem.Button>
* </AccordionItem.Header>
* ```
*/
declare const AccordionItemButton: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "render"> & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
/**
* An accordion item’s label.
*
* Must be a descendant of `AccordionItem.Button`.
*
* Example:
* ```tsx
* <AccordionItem.Button>
* <AccordionItem.Label>Label</AccordionItem.Label>
* </AccordionItem.Button>
* ```
*/
declare const AccordionItemLabel: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
/**
* The always-visible, optional decoration of the `AccordionItem.Header` content.
* It can be placed before or after the rest of the content in
* `AccordionItem.Header`. However, the `AccordionItem.Marker` must always be
* placed at either edge (beginning or end) of the header.
*
* Use as a direct descendant of `AccordionItem.Header`. The decoration
* can be placed before the rest of the header content.
*
* Example:
* ```tsx
* <AccordionItem.Header>
* <AccordionItem.Marker />
* <AccordionItem.Decoration render={<Icon href={placeholder} />} />
* <AccordionItem.Button>
* <AccordionItem.Label>Label</AccordionItem.Label>
* </AccordionItem.Button>
* </AccordionItem.Header>
* ```
*
* Alternatively, the decoration can also be placed after the rest of the
* header content.
*
* Example:
* ```tsx
* <AccordionItem.Header>
* <AccordionItem.Marker />
* <AccordionItem.Button>
* <AccordionItem.Label>Label</AccordionItem.Label>
* </AccordionItem.Button>
* <AccordionItem.Decoration render={<Icon href={placeholder} />} />
* </AccordionItem.Header>
* ```
*
* There can also be multiple decorations if passed as children under
* `AccordionItem.Decoration`.
*
* Example:
* ```tsx
* <AccordionItem.Header>
* <AccordionItem.Marker />
* <AccordionItem.Decoration>
* <Icon href={placeholder} />
* <Icon href={placeholder} />
* </AccordionItem.Decoration>
* <AccordionItem.Button>
* <AccordionItem.Label>Label</AccordionItem.Label>
* </AccordionItem.Button>
* </AccordionItem.Header>
* ```
*/
declare const AccordionItemDecoration: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
/**
* The visual marker of the `AccordionItem.Header` content. While it can be
* placed before or after the rest of the content in `AccordionItem.Header`,
* it is recommended to place the marker before.
*
* Example:
* ```tsx
* <AccordionItem.Header>
* <AccordionItem.Marker />
* <AccordionItem.Button>
* <AccordionItem.Label>Label</AccordionItem.Label>
* </AccordionItem.Button>
* </AccordionItem.Header>
* ```
*
* Alternatively, the marker can also be placed after the rest of the header
* content.
*
* Example:
* ```tsx
* <AccordionItem.Header>
* <AccordionItem.Button>
* <AccordionItem.Label>Label</AccordionItem.Label>
* </AccordionItem.Button>
* <AccordionItem.Marker />
* </AccordionItem.Header>
* ```
*
* Pass an icon as a child to override the default chevron icon:
* ```tsx
* <AccordionItem.Header>
* <AccordionItem.Marker>
* <Icon href={placeholder} />
* </AccordionItem.Marker>
* <AccordionItem.Button>
* <AccordionItem.Label>Label</AccordionItem.Label>
* </AccordionItem.Button>
* </AccordionItem.Header>
* ```
*/
declare const AccordionItemMarker: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
/**
* The disclosed content of the accordion item.
*
* Example:
* ```tsx
* <AccordionItem.Root>
* <AccordionItem.Header>
* <AccordionItem.Marker />
* <AccordionItem.Button>
* <AccordionItem.Label>Label</AccordionItem.Label>
* </AccordionItem.Button>
* </AccordionItem.Header>
* <AccordionItem.Content>Body</AccordionItem.Content>
* </AccordionItem.Root>
* ```
*/
declare const AccordionItemContent: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
interface AccordionItemHeadingProps extends BaseProps {
render: NonNullable<BaseProps["render"]>;
}
/**
* A heading for wrapping `AccordionItem.Button`.
*
* The `render` prop is required.
*
* Example:
* ```tsx
* <AccordionItem.Header>
* <AccordionItem.Marker />
* <AccordionItem.Heading render={<h2 />}>
* <AccordionItem.Button>
* <AccordionItem.Label>Label</AccordionItem.Label>
* </AccordionItem.Button>
* </AccordionItem.Heading>
* </AccordionItem.Header>
*/
declare const AccordionItemHeading: import("react").ForwardRefExoticComponent<AccordionItemHeadingProps & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
export { AccordionItemRoot as Root, AccordionItemContent as Content, AccordionItemHeader as Header, AccordionItemButton as Button, AccordionItemLabel as Label, AccordionItemDecoration as Decoration, AccordionItemMarker as Marker, AccordionItemHeading as Heading, };