@stratakit/structures/dist/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
    })
  });
});
const AccordionItemHeader = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(GhostAligner, {
  align: "block",
  children: /* @__PURE__ */ jsx(Role, {
    ...props,
    className: cx("\u{1F95D}AccordionItemHeader", props.className),
    ref: forwardedRef
  })
}));
const AccordionItemButton = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Disclosure, {
  ...props,
  className: cx("\u{1F95D}AccordionItemButton", props.className),
  ref: forwardedRef
}));
const AccordionItemLabel = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Text, {
  ...props,
  variant: "body-sm",
  className: cx("\u{1F95D}AccordionItemLabel", props.className),
  ref: forwardedRef
}));
const AccordionItemDecoration = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Role, {
  ...props,
  className: cx("\u{1F95D}AccordionItemDecoration", props.className),
  ref: forwardedRef
}));
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"
  })
}));
const AccordionItemContent = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(DisclosureContent, {
  ...props,
  className: cx("\u{1F95D}AccordionItemContent", props.className),
  ref: forwardedRef
}));
const AccordionItemHeading = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Text, {
  ...props,
  variant: "body-sm",
  className: cx("\u{1F95D}AccordionItemHeading", props.className),
  ref: forwardedRef
}));
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
};