@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
104 lines (103 loc) • 3.32 kB
TypeScript
import { Collapsible as CollapsiblePrimitive } from 'radix-ui';
import { ComponentProps } from 'react';
import { AsChildProp } from '../../utils/misc';
/**
* Primitive component for collapsible content. Root provides state.
*
* Renders fully accessible and animated collapsible, with no styles besides necessary.
*
* @example
* ```tsx
* // Basic usage
* <CollapsibleRoot>
* <CollapsibleTrigger>Toggle</CollapsibleTrigger>
* <CollapsibleContent>Content to collapse</CollapsibleContent>
* </CollapsibleRoot>
* ```
*
* @example
* ```tsx
* // With button and content styles
* <CollapsibleRoot>
* <CollapsibleTrigger asChild>
* <Button>Trigger me</Button>
* </CollapsibleTrigger>
* <CollapsibleContent>
* <div className="p-5 bg-primary">Content to collapse</div>
* </CollapsibleContent>
* </CollapsibleRoot>
* ```
*/
export declare const CollapsibleRoot: (props: ComponentProps<typeof CollapsiblePrimitive.Root>) => import("react").JSX.Element;
/**
* Button that toggles the collapsible.
*
* @example
* ```tsx
* <CollapsibleTrigger asChild>
* <Button>Trigger me</Button>
* </CollapsibleTrigger>
* ```
*/
export declare const CollapsibleTrigger: import('react').ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
export interface CollapsibleRootProps extends ComponentProps<"div"> {
asChild?: AsChildProp;
}
/**
* Primitive component providing collapsing animation.
* Mostly unstyled, provided just essential styles for collapsing.
*
* Collapse relies on animating `grid-template-rows`.
* `1fr` when visible, `0fr` when hidden.
* This approach guarantees performant transition and animation from 0 to max height.
*
* @example
* ```tsx
* <CollapsibleContentRoot>
* <CollapsibleContentInner>
* Content to collapse
* </CollapsibleContentInner>
* </CollapsibleContentRoot>
* ```
*/
export declare const CollapsibleContentRoot: ({ className, asChild, ...props }: CollapsibleRootProps) => import("react").JSX.Element;
export interface CollapsibleContentProps extends ComponentProps<"div"> {
asChild?: AsChildProp;
}
/**
* Content container for CollapsibleContentRoot.
* It just renders div with hidden overflow, but this structure
* is necessary for collapsing to work.
*
* @remarks
* If you want to add padding or margin to the content,
* make sure to add it to the children of `CollapsibleContentInner`.
*
* @example
* ```tsx
* <CollapsibleContentRoot>
* <CollapsibleContentInner>
* <div className="p-5">Content to collapse</div>
* </CollapsibleContentInner>
* </CollapsibleContentRoot>
* ```
*/
export declare const CollapsibleContentInner: ({ className, asChild, ...props }: CollapsibleContentProps) => import("react").JSX.Element;
/**
* Shows collapsed content. Has to be used within CollapsibleRoot.
*
* @example
* ```tsx
* // Basic usage
* <CollapsibleContent>Content to collapse</CollapsibleContent>
* ```
*
* @example
* ```tsx
* // With content styles
* <CollapsibleContent>
* <div className="p-5 bg-primary">Content to collapse</div>
* </CollapsibleContent>
* ```
*/
export declare const CollapsibleContent: ({ children, ...props }: ComponentProps<typeof CollapsiblePrimitive.Content>) => import("react").JSX.Element;