@loke/ui/dist/components/accordion/accordion.d.ts

import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@loke/ui/collapsible";
import { Primitive } from "@loke/ui/primitive";
import React from "react";
type Direction = "ltr" | "rtl";
declare const createAccordionScope: import("@loke/ui/context").CreateScope;
/**
 * Properties for the single type Accordion component where only one item can be open at a time.
 * This is useful for content where one section should be focused at a time.
 */
interface AccordionSingleProps extends AccordionImplSingleProps {
    /**
     * Specifies the accordion type as 'single', where only one item can be open at a time.
     * When one item opens, any previously opened item will close automatically.
     */
    type: "single";
}
/**
 * Properties for the multiple type Accordion component where multiple items can be open simultaneously.
 * This is useful when users need to compare information across multiple sections.
 */
interface AccordionMultipleProps extends AccordionImplMultipleProps {
    /**
     * Specifies the accordion type as 'multiple', where multiple items can be open simultaneously.
     * Each item can be opened or closed independently of other items.
     */
    type: "multiple";
}
/**
 * Accordion component for displaying collapsible content panels.
 *
 * Accordions organize content into collapsible sections, allowing users to focus on relevant information.
 * They reduce cognitive load by hiding content until needed, and conserve screen space by showing only
 * active sections.
 *
 * The component supports two operational modes:
 * - 'single': Only one item can be expanded at a time (exclusive selection)
 * - 'multiple': Multiple items can be expanded simultaneously (independent selection)
 *
 * Accordions have robust keyboard navigation support and are accessible by default.
 */
declare const Accordion: React.ForwardRefExoticComponent<(AccordionSingleProps | AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
/**
 * Implementation properties for a single-value accordion, where only one item can be open at a time.
 * This variant maintains a single active value and handles its state transitions.
 */
interface AccordionImplSingleProps extends AccordionImplProps {
    /**
     * Controls whether an accordion item can be collapsed after being opened.
     * When false, once an item is opened it cannot be closed until another item is opened.
     */
    collapsible?: boolean;
    /**
     * The initially expanded accordion item when first rendered.
     * Use this prop for uncontrolled behavior when you don't need to manage the state externally.
     */
    defaultValue?: string;
    /**
     * Callback function invoked when the expanded state changes.
     * Receives the newly expanded item's value as an argument.
     */
    onValueChange?(value: string): void;
    /**
     * The controlled value of the accordion item that is currently expanded.
     * Use this prop when you need to control the accordion's state from a parent component.
     */
    value?: string;
}
/**
 * Implementation properties for a multiple-value accordion, where multiple items can be open simultaneously.
 * This variant maintains an array of active values and manages their additions and removals.
 */
interface AccordionImplMultipleProps extends AccordionImplProps {
    /**
     * The initially expanded accordion items when first rendered.
     * Use this prop for uncontrolled behavior when you don't need to manage the state externally.
     */
    defaultValue?: string[];
    /**
     * Callback function invoked when the expanded state changes.
     * Receives an array of all currently expanded item values.
     */
    onValueChange?(value: string[]): void;
    /**
     * The controlled array of accordion item values that are currently expanded.
     * Use this prop when you need to control the accordion's state from a parent component.
     */
    value?: string[];
}
type PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;
/**
 * Base implementation properties for all accordion types.
 * These properties apply to both single and multiple accordion variants.
 */
interface AccordionImplProps extends PrimitiveDivProps {
    /**
     * Controls the text and navigation direction.
     * Affects keyboard navigation and visual presentation for right-to-left languages.
     */
    dir?: Direction;
    /**
     * When true, prevents user interaction with the entire accordion.
     * All items will be locked in their current state and won't respond to clicks or keyboard interactions.
     */
    disabled?: boolean;
    /**
     * Controls the directional flow of the accordion items.
     * Vertical orientation stacks items, while horizontal places them side by side.
     * This affects keyboard navigation behavior as well.
     */
    orientation?: React.AriaAttributes["aria-orientation"];
}
type CollapsibleProps = React.ComponentPropsWithoutRef<typeof Collapsible>;
/**
 * Properties for the AccordionItem component which represents a single collapsible section.
 * Each item must have a unique value within its parent Accordion.
 */
interface AccordionItemProps extends Omit<CollapsibleProps, "open" | "defaultOpen" | "onOpenChange"> {
    /**
     * When true, prevents user interaction with this specific accordion item.
     * The item will be locked in its current state and won't respond to interactions.
     * Other accordion items remain interactive unless individually disabled.
     */
    disabled?: boolean;
    /**
     * A unique identifier for this accordion item within its parent accordion.
     * This value is required and used to track the item's expanded state.
     * All items within an accordion must have distinct values.
     */
    value: string;
}
/**
 * AccordionItem represents a collapsible section within an Accordion.
 * It contains a header, trigger, and content that can be expanded or collapsed.
 *
 * Each item maintains its own expanded state and can be independently controlled
 * based on the parent Accordion's configuration.
 */
declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
type PrimitiveHeading3Props = React.ComponentPropsWithoutRef<typeof Primitive.h3>;
type AccordionHeaderProps = PrimitiveHeading3Props;
/**
 * AccordionHeader contains the content for the visible part of an AccordionItem.
 * This section is always visible regardless of whether the content is expanded or collapsed.
 *
 * It typically contains the AccordionTrigger component and serves as the accessible label
 * for the expandable region.
 */
declare const AccordionHeader: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & {
    asChild?: boolean;
}, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
type CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsibleTrigger>;
type AccordionTriggerProps = CollapsibleTriggerProps;
/**
 * AccordionTrigger is the interactive element that toggles the expanded state of an AccordionItem.
 *
 * It must be nested inside an AccordionHeader and acts as the control that users
 * interact with to expand or collapse the associated content.
 *
 * This component includes accessibility attributes and keyboard handling for proper
 * navigation and interaction.
 */
declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
    asChild?: boolean;
}, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
type CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsibleContent>;
type AccordionContentProps = CollapsibleContentProps;
/**
 * AccordionContent contains the expandable and collapsible content of an AccordionItem.
 *
 * This component is hidden when the accordion item is collapsed and visible when expanded.
 * It includes transition animations and appropriate accessibility attributes to ensure
 * proper behavior and user experience.
 */
declare const AccordionContent: React.ForwardRefExoticComponent<Omit<import("@loke/ui/collapsible").CollapsibleContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
declare const Root: React.ForwardRefExoticComponent<(AccordionSingleProps | AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
declare const Item: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
declare const Header: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLHeadingElement> & React.HTMLAttributes<HTMLHeadingElement> & {
    asChild?: boolean;
}, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
declare const Trigger: React.ForwardRefExoticComponent<Omit<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
    asChild?: boolean;
}, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
declare const Content: React.ForwardRefExoticComponent<Omit<import("@loke/ui/collapsible").CollapsibleContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, createAccordionScope, Root, Item, Header, Trigger, Content, };
export type { AccordionSingleProps, AccordionMultipleProps, AccordionItemProps, AccordionHeaderProps, AccordionTriggerProps, AccordionContentProps, };