Disclosure Components

import { Accordion, useAccordion, useAccordionContext, useAccordionItemContext } from "@chakra-ui/react";

interface AccordionRootProps {
  value?: string[];
  defaultValue?: string[];
  multiple?: boolean;
  collapsible?: boolean;
  disabled?: boolean;
  onValueChange?: (details: AccordionValueChangeDetails) => void;
  onFocusChange?: (details: AccordionFocusChangeDetails) => void;
  children?: React.ReactNode;
}

namespace Accordion {
  export const Root: React.FC<AccordionRootProps>;
  export const RootProvider: React.FC<AccordionRootProps>;
  export const Item: React.FC<{
    value: string;
    disabled?: boolean;
    children?: React.ReactNode;
  }>;
  export const ItemTrigger: ChakraComponent<"button">;
  export const ItemContent: ChakraComponent<"div">;
  export const ItemBody: ChakraComponent<"div">;
  export const ItemIndicator: ChakraComponent<"div">;
}

interface AccordionValueChangeDetails {
  value: string[];
}

interface AccordionFocusChangeDetails {
  value: string | null;
}

function useAccordion(props: UseAccordionProps): UseAccordionReturn;
function useAccordionContext(): AccordionContext;
function useAccordionItemContext(): AccordionItemContext;

<Accordion.Root defaultValue={["item-1"]}>
  <Accordion.Item value="item-1">
    <Accordion.ItemTrigger>
      Section 1
      <Accordion.ItemIndicator />
    </Accordion.ItemTrigger>
    <Accordion.ItemContent>
      <Accordion.ItemBody>Content for section 1</Accordion.ItemBody>
    </Accordion.ItemContent>
  </Accordion.Item>
  <Accordion.Item value="item-2">
    <Accordion.ItemTrigger>
      Section 2
      <Accordion.ItemIndicator />
    </Accordion.ItemTrigger>
    <Accordion.ItemContent>
      <Accordion.ItemBody>Content for section 2</Accordion.ItemBody>
    </Accordion.ItemContent>
  </Accordion.Item>
</Accordion.Root>

import { Tabs, useTabs, useTabsContext } from "@chakra-ui/react";

interface TabsRootProps {
  value?: string;
  defaultValue?: string;
  orientation?: "horizontal" | "vertical";
  activationMode?: "manual" | "automatic";
  loop?: boolean;
  variant?: "line" | "enclosed" | "outline" | "plain";
  size?: "sm" | "md" | "lg";
  fitted?: boolean;
  onValueChange?: (details: { value: string }) => void;
  onFocusChange?: (details: { value: string | null }) => void;
  children?: React.ReactNode;
}

namespace Tabs {
  export const Root: React.FC<TabsRootProps>;
  export const RootProvider: React.FC<TabsRootProps>;
  export const List: ChakraComponent<"div">;
  export const Trigger: ChakraComponent<"button", {
    value: string;
    disabled?: boolean;
  }>;
  export const Content: ChakraComponent<"div", {
    value: string;
  }>;
  export const ContentGroup: ChakraComponent<"div">;
  export const Indicator: ChakraComponent<"div">;
}

interface UseTabsProps {
  value?: string;
  defaultValue?: string;
  orientation?: "horizontal" | "vertical";
  onValueChange?: (details: { value: string }) => void;
}

interface UseTabsReturn {
  value: string;
  setValue: (value: string) => void;
  focused: string | null;
  getTriggerProps: (props: { value: string }) => any;
  getContentProps: (props: { value: string }) => any;
  getListProps: () => any;
}

function useTabs(props: UseTabsProps): UseTabsReturn;
function useTabsContext(): TabsContext;

<Tabs.Root defaultValue="tab-1" variant="line" size="md">
  <Tabs.List>
    <Tabs.Trigger value="tab-1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab-3">Tab 3</Tabs.Trigger>
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.ContentGroup>
    <Tabs.Content value="tab-1">Content 1</Tabs.Content>
    <Tabs.Content value="tab-2">Content 2</Tabs.Content>
    <Tabs.Content value="tab-3">Content 3</Tabs.Content>
  </Tabs.ContentGroup>
</Tabs.Root>

import { Collapsible, useCollapsible, useCollapsibleContext } from "@chakra-ui/react";

interface CollapsibleRootProps {
  open?: boolean;
  defaultOpen?: boolean;
  disabled?: boolean;
  lazyMount?: boolean;
  unmountOnExit?: boolean;
  onOpenChange?: (details: { open: boolean }) => void;
  children?: React.ReactNode;
}

namespace Collapsible {
  export const Root: React.FC<CollapsibleRootProps>;
  export const RootProvider: React.FC<CollapsibleRootProps>;
  export const Trigger: ChakraComponent<"button">;
  export const Content: ChakraComponent<"div">;
  export const Indicator: ChakraComponent<"div">;
}

interface UseCollapsibleProps {
  open?: boolean;
  defaultOpen?: boolean;
  disabled?: boolean;
  onOpenChange?: (details: { open: boolean }) => void;
}

interface UseCollapsibleReturn {
  open: boolean;
  setOpen: (open: boolean) => void;
  disabled: boolean;
  getTriggerProps: () => any;
  getContentProps: () => any;
}

function useCollapsible(props: UseCollapsibleProps): UseCollapsibleReturn;
function useCollapsibleContext(): CollapsibleContext;

<Collapsible.Root>
  <Collapsible.Trigger>
    Toggle Content <Collapsible.Indicator />
  </Collapsible.Trigger>
  <Collapsible.Content>
    <Box p="4">Collapsible content goes here</Box>
  </Collapsible.Content>
</Collapsible.Root>

interface UseAccordionProps {
  value?: string[];
  defaultValue?: string[];
  multiple?: boolean;
  collapsible?: boolean;
  onValueChange?: (details: AccordionValueChangeDetails) => void;
}

interface UseAccordionReturn {
  value: string[];
  setValue: (value: string[]) => void;
  focused: string | null;
  getItemProps: (props: { value: string }) => any;
  getItemTriggerProps: (props: { value: string }) => any;
  getItemContentProps: (props: { value: string }) => any;
}

interface AccordionContext extends UseAccordionReturn {}

interface AccordionItemContext {
  value: string;
  open: boolean;
  disabled: boolean;
  focused: boolean;
}

interface TabsContext extends UseTabsReturn {}

interface CollapsibleContext extends UseCollapsibleReturn {}