@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
160 lines • 6.61 kB
TypeScript
import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
import * as React from "react";
type AccordionRootBaseProps = Omit<React.ComponentPropsWithRef<typeof BaseAccordion.Root>, "defaultValue" | "multiple" | "onValueChange" | "value" | "className">;
/**
* Props for the single-item accordion root wrapper.
*/
interface AccordionSingleProps extends AccordionRootBaseProps {
/** Controls whether the accordion only allows one item to be expanded at a time. @default "single" */
type?: "single";
/** Legacy compatibility flag accepted by the wrapper but not forwarded to Base UI. @default undefined */
collapsible?: boolean;
/** Additional CSS classes merged with the accordion root styles. @default undefined */
className?: string;
/** The initially expanded item value in uncontrolled single mode. @default undefined */
defaultValue?: string;
/** Called when the expanded item changes in single mode. @default undefined */
onValueChange?: (value: string | undefined, eventDetails: unknown) => void;
/** The controlled expanded item value in single mode. @default undefined */
value?: string;
}
/**
* Props for the multi-item accordion root wrapper.
*/
interface AccordionMultipleProps extends AccordionRootBaseProps {
/** Controls whether the accordion allows multiple items to stay expanded. @default "multiple" */
type: "multiple";
/** Legacy compatibility flag accepted by the wrapper but not forwarded to Base UI. @default undefined */
collapsible?: boolean;
/** Additional CSS classes merged with the accordion root styles. @default undefined */
className?: string;
/** The initially expanded item values in uncontrolled multi mode. @default undefined */
defaultValue?: string[];
/** Called when the expanded item values change in multi mode. @default undefined */
onValueChange?: (value: string[], eventDetails: unknown) => void;
/** The controlled expanded item values in multi mode. @default undefined */
value?: string[];
}
/**
* Props for an accordion item wrapper.
*/
interface AccordionItemProps extends Omit<React.ComponentPropsWithRef<typeof BaseAccordion.Item>, "className"> {
/** Additional CSS classes merged with the accordion item styles. @default undefined */
className?: string;
}
/**
* Props for an accordion trigger wrapper.
*/
interface AccordionTriggerProps extends Omit<React.ComponentPropsWithRef<typeof BaseAccordion.Trigger>, "className"> {
/** Additional CSS classes merged with the accordion trigger styles. @default undefined */
className?: string;
}
/**
* Props for an accordion content wrapper.
*/
interface AccordionContentProps extends Omit<React.ComponentPropsWithRef<typeof BaseAccordion.Panel>, "className"> {
/** Additional CSS classes merged with the accordion content styles. @default undefined */
className?: string;
}
/**
* Groups disclosure items into a styled accordion container.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/accordion | Base UI Accordion}
* - Supports the `render` prop for element composition
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <Accordion>
* <AccordionItem value="item-1">
* <AccordionTrigger>Section</AccordionTrigger>
* <AccordionContent>Content</AccordionContent>
* </AccordionItem>
* </Accordion>
* ```
*
* @see {@link https://base-ui.com/react/components/accordion | Base UI Documentation}
*/
declare function Accordion(props: Readonly<Accordion.Props>): React.ReactElement;
declare namespace Accordion {
var displayName: string;
}
/**
* Wraps a single accordion item with shared border and spacing styles.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/accordion | Base UI Accordion}
* - Supports the `render` prop for element composition
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <AccordionItem value="item-1">
* <AccordionTrigger>Section</AccordionTrigger>
* <AccordionContent>Content</AccordionContent>
* </AccordionItem>
* ```
*
* @see {@link https://base-ui.com/react/components/accordion | Base UI Documentation}
*/
declare function AccordionItem(props: Readonly<AccordionItem.Props>): React.ReactElement;
declare namespace AccordionItem {
var displayName: string;
}
/**
* Toggles an accordion item while rendering the chevron affordance.
*
* @remarks
* - Renders a `<button>` element by default
* - Built on {@link https://base-ui.com/react/components/accordion | Base UI Accordion}
* - Supports the `render` prop for element composition
* - Includes a built-in chevron icon; use the `render` prop for full custom trigger rendering or wrap
* the component when you need a different icon treatment
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <AccordionTrigger>Section</AccordionTrigger>
* ```
*
* @see {@link https://base-ui.com/react/components/accordion | Base UI Documentation}
*/
declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionTriggerProps, "ref"> & React.RefAttributes<HTMLElement>>;
/**
* Reveals accordion panel content with shared spacing and animation hooks.
*
* @remarks
* - Renders a `<div>` element by default
* - Built on {@link https://base-ui.com/react/components/accordion | Base UI Accordion}
* - Supports the `render` prop for element composition
* - Styling via CSS Modules with `--ac-*` custom properties
*
* @example Basic usage
* ```tsx
* <AccordionContent>Content</AccordionContent>
* ```
*
* @see {@link https://base-ui.com/react/components/accordion | Base UI Documentation}
*/
declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare namespace Accordion {
type Props = AccordionSingleProps | AccordionMultipleProps;
type State = BaseAccordion.Root.State<string>;
}
declare namespace AccordionItem {
type Props = AccordionItemProps;
type State = BaseAccordion.Item.State;
}
declare namespace AccordionTrigger {
type Props = AccordionTriggerProps;
type State = BaseAccordion.Trigger.State;
}
declare namespace AccordionContent {
type Props = AccordionContentProps;
type State = BaseAccordion.Panel.State;
}
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };
//# sourceMappingURL=accordion.d.ts.map