Core Components

/**
 * The wrapper that provides context and focus management for all accordion items.
 * It wraps all accordion items in a div for better grouping.
 */
declare const Accordion: React.ForwardRefExoticComponent<
  AccordionProps & React.RefAttributes<HTMLDivElement>
>;

interface AccordionProps extends UseAccordionProps, HTMLChakraProps<"div">, ThemingProps<"Accordion"> {
  /** If true, height animation and transitions will be disabled */
  reduceMotion?: boolean;
}

import { Accordion, AccordionItem } from "@chakra-ui/accordion";

// Basic accordion (only one item can be open)
function BasicAccordion() {
  return (
    <Accordion>
      <AccordionItem>{/* ... */}</AccordionItem>
      <AccordionItem>{/* ... */}</AccordionItem>
    </Accordion>
  );
}

// Allow multiple items to be open
function MultipleAccordion() {
  return (
    <Accordion allowMultiple>
      <AccordionItem>{/* ... */}</AccordionItem>
      <AccordionItem>{/* ... */}</AccordionItem>
    </Accordion>
  );
}

// Allow toggling (closing open item)
function ToggleAccordion() {
  return (
    <Accordion allowToggle>
      <AccordionItem>{/* ... */}</AccordionItem>
    </Accordion>
  );
}

// Controlled accordion
function ControlledAccordion() {
  const [index, setIndex] = React.useState(0);
  
  return (
    <Accordion index={index} onChange={setIndex}>
      <AccordionItem>{/* ... */}</AccordionItem>
      <AccordionItem>{/* ... */}</AccordionItem>
    </Accordion>
  );
}

// Disable animations
function ReducedMotionAccordion() {
  return (
    <Accordion reduceMotion>
      <AccordionItem>{/* ... */}</AccordionItem>
    </Accordion>
  );
}

/**
 * AccordionItem is a single accordion that provides the open-close
 * behavior when the accordion button is clicked.
 * It also provides context for the accordion button and panel.
 */
declare const AccordionItem: React.ForwardRefExoticComponent<
  AccordionItemProps & React.RefAttributes<HTMLDivElement>
>;

interface AccordionItemProps extends UseAccordionItemProps, HTMLChakraProps<"div"> {
  children?:
    | React.ReactNode
    | ((props: { isExpanded: boolean; isDisabled: boolean }) => React.ReactNode);
}

interface UseAccordionItemProps {
  /** If true, the accordion item will be disabled */
  isDisabled?: boolean;
  /** If true, the accordion item will be focusable */
  isFocusable?: boolean;
  /** A unique id for the accordion item */
  id?: string;
}

import { AccordionItem, AccordionButton, AccordionPanel } from "@chakra-ui/accordion";

// Basic accordion item
function BasicItem() {
  return (
    <AccordionItem>
      <AccordionButton>Item Title</AccordionButton>
      <AccordionPanel>Item Content</AccordionPanel>
    </AccordionItem>
  );
}

// Disabled accordion item
function DisabledItem() {
  return (
    <AccordionItem isDisabled>
      <AccordionButton>Disabled Item</AccordionButton>
      <AccordionPanel>This content cannot be opened</AccordionPanel>
    </AccordionItem>
  );
}

// Render prop pattern for dynamic content
function DynamicItem() {
  return (
    <AccordionItem>
      {({ isExpanded, isDisabled }) => (
        <>
          <AccordionButton>
            {isExpanded ? "Collapse" : "Expand"} Item
            {isDisabled && " (Disabled)"}
          </AccordionButton>
          <AccordionPanel>
            This content shows expansion state: {isExpanded ? "Open" : "Closed"}
          </AccordionPanel>
        </>
      )}
    </AccordionItem>
  );
}

/**
 * AccordionButton is used expands and collapses an accordion item.
 * It must be a child of AccordionItem.
 * 
 * Note: Each accordion button must be wrapped in a heading tag,
 * that is appropriate for the information architecture of the page.
 */
declare const AccordionButton: React.ForwardRefExoticComponent<
  AccordionButtonProps & React.RefAttributes<HTMLButtonElement>
>;

interface AccordionButtonProps extends HTMLChakraProps<"button"> {}

import { AccordionButton, AccordionIcon } from "@chakra-ui/accordion";

// Basic accordion button (must be wrapped in heading)
function BasicButton() {
  return (
    <h2>
      <AccordionButton>
        Section Title
      </AccordionButton>
    </h2>
  );
}

// Button with icon
function ButtonWithIcon() {
  return (
    <h2>
      <AccordionButton>
        <div style={{ flex: 1, textAlign: "left" }}>
          Section Title
        </div>
        <AccordionIcon />
      </AccordionButton>
    </h2>
  );
}

// Custom styled button
function StyledButton() {
  return (
    <h3>
      <AccordionButton
        _expanded={{ bg: "blue.500", color: "white" }}
        _hover={{ bg: "gray.100" }}
      >
        Custom Styled Button
      </AccordionButton>
    </h3>
  );
}

/**
 * Accordion panel that holds the content for each accordion.
 * It shows and hides based on the state logic from the AccordionItem.
 * It uses the Collapse component to animate its height.
 */
declare const AccordionPanel: React.ForwardRefExoticComponent<
  AccordionPanelProps & React.RefAttributes<HTMLDivElement>
>;

interface AccordionPanelProps extends HTMLChakraProps<"div"> {
  /** The properties passed to the underlying Collapse component */
  motionProps?: CollapseProps;
}

interface CollapseProps {
  /** If true, the opacity of the content will be animated */
  animateOpacity?: boolean;
  /** The height you want the content in its collapsed state */
  startingHeight?: number | string;
  /** The height you want the content in its expanded state */
  endingHeight?: number | string;
  /** Custom transition for the collapse animation */
  transition?: any;
}

import { AccordionPanel } from "@chakra-ui/accordion";

// Basic accordion panel
function BasicPanel() {
  return (
    <AccordionPanel pb={4}>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </AccordionPanel>
  );
}

// Panel with custom animation
function CustomAnimationPanel() {
  return (
    <AccordionPanel
      motionProps={{
        animateOpacity: true,
        transition: { duration: 0.3 }
      }}
    >
      Content with custom animation timing
    </AccordionPanel>
  );
}

// Panel with custom starting height
function CustomHeightPanel() {
  return (
    <AccordionPanel
      motionProps={{
        startingHeight: 40,
        endingHeight: "auto"
      }}
    >
      Content that starts partially visible
    </AccordionPanel>
  );
}

/**
 * AccordionIcon that gives a visual cue of the open/close state of the accordion item.
 * It rotates 180deg based on the open/close state.
 */
declare const AccordionIcon: React.FC<AccordionIconProps>;

type AccordionIconProps = PropsOf<typeof Icon>;

import { AccordionIcon } from "@chakra-ui/accordion";

// Basic icon usage
function IconUsage() {
  return (
    <AccordionButton>
      <div style={{ flex: 1, textAlign: "left" }}>
        Section Title
      </div>
      <AccordionIcon />
    </AccordionButton>
  );
}

// Custom styled icon
function CustomIcon() {
  return (
    <AccordionButton>
      Section Title
      <AccordionIcon color="blue.500" fontSize="20px" />
    </AccordionButton>
  );
}

interface HTMLChakraProps<T extends As> extends ChakraProps, HTMLAttributes<DOMElements[T]> {
  as?: T;
}

interface ThemingProps<ThemeComponent extends string = string> {
  variant?: string;
  size?: string;
  colorScheme?: string;
  orientation?: "horizontal" | "vertical";
  styleConfig?: SystemStyleObject;
}

interface ChakraProps extends SystemProps {
  className?: string;
  children?: React.ReactNode;
}