@infinityfx/fluid/dist/components/layout/accordion/item.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsxs as r,Fragment as e,jsx as o}from"react/jsx-runtime";import{useId as n,useRef as i,useEffect as a}from"react";import t from"../../feedback/halo.js";import l from"../collapsible.js";import{Animatable as c}from"@infinityfx/lively";import{useAccordion as d}from"./root.js";import{combineClasses as s,classes as m}from"../../../core/utils.js";import{createStyles as p}from"../../../core/style.js";import{Icon as f}from"../../../core/icons.js";const u=p("accordion.item",{".button":{position:"relative",borderRadius:"var(--f-radius-sml)",padding:".6em",display:"flex",alignItems:"center",justifyContent:"space-between",gap:"var(--f-spacing-sml)",outline:"none",border:"none",background:"none",color:"var(--f-clr-text-100)",transition:"background-color .5s",WebkitTapHighlightColor:"transparent"},'.v__minimal[aria-expanded="true"]':{backgroundColor:"var(--f-clr-fg-100)"},".button:enabled":{cursor:"pointer"},".button:disabled":{color:"var(--f-clr-grey-500)"},'.v__minimal:disabled[aria-expanded="true"]':{backgroundColor:"var(--f-clr-fg-200)"},".content":{padding:".6em",color:"var(--f-clr-text-100)"},".icon":{height:"1em",overflow:"hidden",flexShrink:0},".arrows":{display:"flex",flexDirection:"column"}});function b({children:p,cc:b={},label:g,defaultOpen:v=!1,disabled:h,...x}){const y=s(u,b),j=n(),{variant:k,open:w,toggle:N}=d(),_=i(!1),C=_.current?w.indexOf(j)>=0:v;return a((()=>{v&&N(j,!0),_.current=!0}),[]),r(e,{children:[o(t,{disabled:h,color:"var(--f-clr-primary-400)",children:r("button",{type:"button",disabled:h,"aria-expanded":C,"aria-controls":j,className:m(y.button,y[`v__${k}`]),onClick:()=>N(j,!C),children:[g,o("div",{className:y.icon,children:o(c,{animate:{translate:["0% 0%","0% -50%"],duration:.35},triggers:[{on:C},{on:!C,reverse:!0}],children:r("div",{className:y.arrows,children:[o(f,{type:"expandDown"}),o(f,{type:"collapseUp"})]})})})]})}),o(l,{shown:C,id:j,children:o("div",{...x,className:m(y.content,x.className),children:p})})]})}b.displayName="Accordion.Item";export{b as default};
//# sourceMappingURL=item.js.map