@stratakit/structures/dist/DEV/AccordionItem.js

Medium-sized component structures for the Strata design system

import { jsx } from "react/jsx-runtime";
import {
  Disclosure,
  DisclosureContent,
  DisclosureProvider
} from "@ariakit/react/disclosure";
import { Role } from "@ariakit/react/role";
import { Text } from "@stratakit/bricks";
import {
  GhostAligner,
  IconButtonPresentation
} from "@stratakit/bricks/secret-internals";
import {
  forwardRef,
  useControlledState
} from "@stratakit/foundations/secret-internals";
import cx from "classnames";
import { ChevronDown } from "./~utils.icons.js";
import { useInit } from "./~utils.useInit.js";
const AccordionItemRoot = forwardRef(
  (props, forwardedRef) => {
    useInit();
    const {
      defaultOpen,
      open: openProp,
      setOpen: setOpenProp,
      ...rest
    } = props;
    const [open, setOpen] = useControlledState(
      defaultOpen ?? false,
      openProp,
      setOpenProp
    );
    return /* @__PURE__ */ jsx(
      DisclosureProvider,
      {
        defaultOpen,
        open,
        setOpen,
        children: /* @__PURE__ */ jsx(
          Role,
          {
            ...rest,
            className: cx("\u{1F95D}AccordionItem", props.className),
            "data-_sk-open": open,
            ref: forwardedRef
          }
        )
      }
    );
  }
);
DEV: AccordionItemRoot.displayName = "AccordionItem.Root";
const AccordionItemHeader = forwardRef(
  (props, forwardedRef) => /* @__PURE__ */ jsx(GhostAligner, { align: "block", children: /* @__PURE__ */ jsx(
    Role,
    {
      ...props,
      className: cx("\u{1F95D}AccordionItemHeader", props.className),
      ref: forwardedRef
    }
  ) })
);
DEV: AccordionItemHeader.displayName = "AccordionItem.Header";
const AccordionItemButton = forwardRef(
  (props, forwardedRef) => /* @__PURE__ */ jsx(
    Disclosure,
    {
      ...props,
      className: cx("\u{1F95D}AccordionItemButton", props.className),
      ref: forwardedRef
    }
  )
);
DEV: AccordionItemButton.displayName = "AccordionItem.Button";
const AccordionItemLabel = forwardRef(
  (props, forwardedRef) => /* @__PURE__ */ jsx(
    Text,
    {
      ...props,
      variant: "body-sm",
      className: cx("\u{1F95D}AccordionItemLabel", props.className),
      ref: forwardedRef
    }
  )
);
DEV: AccordionItemLabel.displayName = "AccordionItem.Label";
const AccordionItemDecoration = forwardRef(
  (props, forwardedRef) => /* @__PURE__ */ jsx(
    Role,
    {
      ...props,
      className: cx("\u{1F95D}AccordionItemDecoration", props.className),
      ref: forwardedRef
    }
  )
);
DEV: AccordionItemDecoration.displayName = "AccordionItem.Decoration";
const AccordionItemMarker = forwardRef(
  (props, forwardedRef) => /* @__PURE__ */ jsx(
    IconButtonPresentation,
    {
      ...props,
      variant: "ghost",
      className: cx("\u{1F95D}AccordionItemMarker", props.className),
      ref: forwardedRef,
      children: props.children ?? /* @__PURE__ */ jsx(
        ChevronDown,
        {
          "aria-hidden": "true",
          className: "\u{1F95D}AccordionItemMarkerChevron"
        }
      )
    }
  )
);
DEV: AccordionItemMarker.displayName = "AccordionItem.Marker";
const AccordionItemContent = forwardRef(
  (props, forwardedRef) => /* @__PURE__ */ jsx(
    DisclosureContent,
    {
      ...props,
      className: cx("\u{1F95D}AccordionItemContent", props.className),
      ref: forwardedRef
    }
  )
);
DEV: AccordionItemContent.displayName = "AccordionItem.Content";
const AccordionItemHeading = forwardRef(
  (props, forwardedRef) => /* @__PURE__ */ jsx(
    Text,
    {
      ...props,
      variant: "body-sm",
      className: cx("\u{1F95D}AccordionItemHeading", props.className),
      ref: forwardedRef
    }
  )
);
DEV: AccordionItemHeading.displayName = "AccordionItem.Heading";
export {
  AccordionItemButton as Button,
  AccordionItemContent as Content,
  AccordionItemDecoration as Decoration,
  AccordionItemHeader as Header,
  AccordionItemHeading as Heading,
  AccordionItemLabel as Label,
  AccordionItemMarker as Marker,
  AccordionItemRoot as Root
};