@while-and-for/tremor-react/dist/components/layout-elements/Accordion/AccordionHeader.js

The React library to build dashboards faster.

'use client';
import{__rest as e}from"tslib";import t,{useContext as r}from"react";import{sizing as o}from"../../../lib/sizing.js";import{spacing as i}from"../../../lib/spacing.js";import{makeClassName as a}from"../../../lib/utils.js";import{tremorTwMerge as s}from"../../../lib/tremorTwMerge.js";import n from"../../../assets/ArrowUpHeadIcon.js";import{Disclosure as m}from"@headlessui/react";import{OpenContext as l}from"./Accordion.js";const c=a("AccordionHeader"),d=t.forwardRef(((a,d)=>{const{children:f,className:p}=a,g=e(a,["children","className"]),{isOpen:h}=r(l);return t.createElement(m.Button,Object.assign({ref:d,className:s(c("root"),"w-full flex items-center justify-between","text-tremor-content-emphasis","dark:text-dark-tremor-content-emphasis",i.twoXl.paddingX,i.lg.paddingY,p)},g),t.createElement("div",{className:s(c("children"),"flex flex-1 text-inherit",i.twoXl.marginRight)},f),t.createElement("div",null,t.createElement(n,{className:s(c("arrowIcon"),"text-tremor-content-subtle","dark:text-dark-tremor-content-subtle",i.twoXs.negativeMarginRight,o.md.height,o.md.width,h?"transition-all":"transition-all -rotate-180")})))}));d.displayName="AccordionHeader";export{d as default};