melt/dist/builders/Accordion.svelte.d.ts

The next generation of Melt UI. Built for Svelte 5.

import { type OnMultipleChange } from "../utils/selection-state.svelte";
import type { FalseIfUndefined } from "../utils/types";
import type { MaybeGetter, MaybeMultiple } from "../types";
export type AccordionItemMeta<Meta extends Record<string, unknown> = Record<never, never>> = {
    /** Unique identifier for the accordion item. */
    id: string;
    /** Disables the accordion item. */
    disabled?: boolean;
    /** If the item has a header, this represents the level of the header. */
    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
} & Meta;
type AccordionValue<Multiple extends boolean> = MaybeMultiple<string, Multiple>;
/**
 * Props for the configuration of the Accordion builder.
 * @template Items - Array type extending AccordionItem.
 * @template Multiple - Boolean indicating if multiple selection is enabled.
 */
export type AccordionProps<Multiple extends boolean = false> = {
    /**
     * If `true`, multiple accordion items can be open at the same time.
     *
     * @default false
     */
    multiple?: MaybeGetter<Multiple | undefined>;
    /**
     * When `true`, prevents the user from interacting with the accordion.
     *
     * @default false
     */
    disabled?: MaybeGetter<boolean | undefined>;
    /**
     * The controlled value for the accordion.
     */
    value?: AccordionValue<Multiple>;
    /**
     * The callback invoked when the value of the Accordion changes.
     */
    onValueChange?: OnMultipleChange<string, Multiple>;
};
export declare class Accordion<Multiple extends boolean = false> {
    #private;
    readonly multiple: Multiple;
    readonly disabled: boolean;
    ids: {
        heading: string;
        root: string;
        item: string;
        trigger: string;
        content: string;
    };
    constructor(props?: AccordionProps<Multiple>);
    get value(): import("../utils/selection-state.svelte").SelectionStateValue<string, FalseIfUndefined<Multiple>>;
    set value(value: import("../utils/selection-state.svelte").SelectionStateValue<string, FalseIfUndefined<Multiple>>);
    /**
     * Spread attributes for the accordion root element.
     */
    get root(): {
        "data-melt-accordion-root": string;
        id: string;
    };
    /**
     * Returns an Item class with the necessary
     * spread attributes for an accordion item.
     * @param item
     */
    getItem<Meta extends Record<string, unknown>>(item: AccordionItemMeta<Meta>): AccordionItem<Meta, Multiple>;
    /**
     * Checks if an item is currently expanded.
     * @param id - ID of the item to check.
     */
    isExpanded(id: string): boolean;
    /**
     * Expands a specific item.
     * @param id - ID of the item to expand.
     */
    expand(id: string): void;
    /**
     * Collapses a specific item.
     * @param id - ID of the item to collapse.
     */
    collapse(id: string): void;
    /**
     * Toggles the expanded state of an item.
     * @param id - ID of the item to toggle.
     */
    toggleExpanded(id: string): void;
}
export type AccordionItemProps<Meta extends Record<string, unknown>, Multiple extends boolean = false> = {
    accordion: Accordion<Multiple>;
    item: AccordionItemMeta<Meta>;
    rootId: string;
};
export declare class AccordionItem<Meta extends Record<string, unknown>, Multiple extends boolean = false> {
    #private;
    readonly item: AccordionItemMeta<Meta>;
    /** Check if this item is disabled. */
    isDisabled: boolean | undefined;
    /** Check if this item is expanded. */
    isExpanded: boolean;
    /** Expands this item. */
    expand: () => void;
    /** Collapses this item. */
    collapse: () => void;
    /** Toggles the expanded state of this item. */
    toggleExpanded: () => void;
    constructor(props: AccordionItemProps<Meta, Multiple>);
    /**
     * Attributes for an accordion heading element.
     */
    get heading(): {
        "data-melt-accordion-heading": string;
        role: string;
        "aria-level": 1 | 2 | 3 | 4 | 5 | 6 | undefined;
        "data-heading-level": 1 | 2 | 3 | 4 | 5 | 6 | undefined;
    };
    /**
     * Attributes for an accordion item trigger.
     */
    get trigger(): {
        "data-melt-accordion-trigger": string;
        disabled: true | undefined;
        "aria-disabled": boolean | undefined;
        "aria-expanded": boolean;
        "data-disabled": "" | undefined;
        "data-value": string;
        "data-state": string;
        onclick: () => void;
        onkeydown: (e: KeyboardEvent) => void;
    };
    /**
     * Attributes for an accordion content element.
     */
    get content(): {
        "data-melt-accordion-content": string;
        "data-state": string;
        "data-disabled": true | undefined;
        "data-value": string;
    };
}
export {};