its-just-ui/dist/components/Accordion/Accordion.d.ts

ITS Just UI - React 18 & React 19 UI component library. 36+ accessible, TypeScript-native components with Tailwind CSS. Zero-config Material UI alternative for SaaS dashboards and enterprise apps.

import { default as React } from 'react';

export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
    type?: 'single' | 'multiple';
    defaultValue?: string | string[];
    value?: string | string[];
    onValueChange?: (value: string | string[]) => void;
    disabled?: boolean;
    collapsible?: boolean;
    variant?: 'default' | 'bordered' | 'filled' | 'separated' | 'outlined';
    size?: 'sm' | 'md' | 'lg';
    status?: 'default' | 'success' | 'warning' | 'error';
    transition?: 'none' | 'fade' | 'slide' | 'collapse' | 'zoom' | 'smooth';
    transitionDuration?: number;
    expandIcon?: React.ReactNode;
    expandIconPosition?: 'start' | 'end';
    loading?: boolean;
    loadingMessage?: string;
    emptyMessage?: string;
    backgroundColor?: string;
    borderWidth?: string;
    borderColor?: string;
    borderStyle?: string;
    borderRadius?: string;
    padding?: string;
    paddingX?: string;
    paddingY?: string;
    gap?: string;
    boxShadow?: string;
    fontSize?: string;
    fontWeight?: string;
    fontFamily?: string;
    textColor?: string;
    itemBackgroundColor?: string;
    itemHoverBackgroundColor?: string;
    itemActiveBackgroundColor?: string;
    itemBorderWidth?: string;
    itemBorderColor?: string;
    itemBorderStyle?: string;
    itemBorderRadius?: string;
    itemPadding?: string;
    itemPaddingX?: string;
    itemPaddingY?: string;
    itemBoxShadow?: string;
    itemGap?: string;
    triggerBackgroundColor?: string;
    triggerHoverBackgroundColor?: string;
    triggerActiveBackgroundColor?: string;
    triggerTextColor?: string;
    triggerHoverTextColor?: string;
    triggerActiveTextColor?: string;
    triggerFontSize?: string;
    triggerFontWeight?: string;
    triggerPadding?: string;
    triggerPaddingX?: string;
    triggerPaddingY?: string;
    triggerBorderRadius?: string;
    contentBackgroundColor?: string;
    contentTextColor?: string;
    contentFontSize?: string;
    contentPadding?: string;
    contentPaddingX?: string;
    contentPaddingY?: string;
    contentBorderWidth?: string;
    contentBorderColor?: string;
    contentBorderStyle?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusRingOffsetColor?: string;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    focusBoxShadow?: string;
    iconSize?: string;
    iconColor?: string;
    iconHoverColor?: string;
    iconActiveColor?: string;
    iconRotation?: string;
    dividerColor?: string;
    dividerWidth?: string;
    dividerStyle?: string;
    successColor?: string;
    warningColor?: string;
    errorColor?: string;
    children: React.ReactNode;
}
interface AccordionContextValue {
    value: string[];
    onItemToggle: (itemValue: string) => void;
    disabled?: boolean;
    variant?: 'default' | 'bordered' | 'filled' | 'separated' | 'outlined';
    size?: 'sm' | 'md' | 'lg';
    status?: 'default' | 'success' | 'warning' | 'error';
    transition?: 'none' | 'fade' | 'slide' | 'collapse' | 'zoom' | 'smooth';
    transitionDuration?: number;
    expandIcon?: React.ReactNode;
    expandIconPosition?: 'start' | 'end';
    loading?: boolean;
    itemBackgroundColor?: string;
    itemHoverBackgroundColor?: string;
    itemActiveBackgroundColor?: string;
    itemBorderWidth?: string;
    itemBorderColor?: string;
    itemBorderStyle?: string;
    itemBorderRadius?: string;
    itemPadding?: string;
    itemPaddingX?: string;
    itemPaddingY?: string;
    itemBoxShadow?: string;
    itemGap?: string;
    triggerBackgroundColor?: string;
    triggerHoverBackgroundColor?: string;
    triggerActiveBackgroundColor?: string;
    triggerTextColor?: string;
    triggerHoverTextColor?: string;
    triggerActiveTextColor?: string;
    triggerFontSize?: string;
    triggerFontWeight?: string;
    triggerPadding?: string;
    triggerPaddingX?: string;
    triggerPaddingY?: string;
    triggerBorderRadius?: string;
    contentBackgroundColor?: string;
    contentTextColor?: string;
    contentFontSize?: string;
    contentPadding?: string;
    contentPaddingX?: string;
    contentPaddingY?: string;
    contentBorderWidth?: string;
    contentBorderColor?: string;
    contentBorderStyle?: string;
    focusRingColor?: string;
    focusRingWidth?: string;
    focusRingOffset?: string;
    focusRingOffsetColor?: string;
    focusBorderColor?: string;
    focusBackgroundColor?: string;
    focusBoxShadow?: string;
    iconSize?: string;
    iconColor?: string;
    iconHoverColor?: string;
    iconActiveColor?: string;
    iconRotation?: string;
    dividerColor?: string;
    dividerWidth?: string;
    dividerStyle?: string;
    successColor?: string;
    warningColor?: string;
    errorColor?: string;
}
export declare const useAccordion: () => AccordionContextValue;
declare const Accordion: React.ForwardRefExoticComponent<AccordionProps & React.RefAttributes<HTMLDivElement>>;
export interface AccordionItemProps extends React.HTMLAttributes<HTMLDivElement> {
    value: string;
    disabled?: boolean;
    children: React.ReactNode;
}
export interface AccordionTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    children: React.ReactNode;
}
declare const AccordionTrigger: React.ForwardRefExoticComponent<AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>>;
export interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
    forceMount?: boolean;
}
declare const AccordionContent: React.ForwardRefExoticComponent<AccordionContentProps & React.RefAttributes<HTMLDivElement>>;
declare const AccordionItemWrapper: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
export { Accordion, AccordionItemWrapper as AccordionItem, AccordionTrigger, AccordionContent };