@cavilha/collapse/dist/index.es.js

A component used to organize and display releated information gradually to optimize screen space.

import e,{useEffect as o}from"react";import{styled as n}from"@cavilha/theme";import*as r from"@radix-ui/react-accordion";import t from"@cavilha/flex";import l from"@cavilha/text";import{faMinus as a,faPlus as c}from"@fortawesome/pro-regular-svg-icons";import{faSortUp as i,faSortDown as s}from"@fortawesome/pro-solid-svg-icons";import d from"@cavilha/icon";var m=function(){return m=Object.assign||function(e){for(var o,n=1,r=arguments.length;n<r;n++)for(var t in o=arguments[n])Object.prototype.hasOwnProperty.call(o,t)&&(e[t]=o[t]);return e},m.apply(this,arguments)};function p(e,o){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&o.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(r=Object.getOwnPropertySymbols(e);t<r.length;t++)o.indexOf(r[t])<0&&Object.prototype.propertyIsEnumerable.call(e,r[t])&&(n[r[t]]=e[r[t]])}return n}var u,f,g,v=n(r.Root,{mx:"$small1",columns:1,"@lg":{columnGap:"$space$medium3"},variants:{columns:{1:{"@lg":{columns:1,columnWidth:"100%"}},2:{"@lg":{columns:2,columnWidth:"50%"}},3:{"@lg":{columns:3,columnWidth:"calc(100% / 3)"}}}}}),b=n(r.Header,{minHeight:"$large3",display:"flex",alignItems:"center",boxSizing:"border-box",breakInside:"avoid",cursor:"pointer",transition:"0.2s",margin:"$medium 10","&:hover":{bc:"$secondary0Hover"}}),$=n(r.Trigger,{textAlign:"left",display:"flex",alignItems:"center",border:"none",padding:"$small3",minHeight:"$large3",outline:"none",background:"transparent",width:"100%",borderRadius:"$small",cursor:"pointer"}),y=n(d,{mr:"$small3",mt:"$small1",color:"$secondary4 !important"}),h=n(d,{color:"$secondary4",alignSelf:"center",mx:"$small2",mt:"calc($sizes$small1 / 2)"}),x=n(r.Content,{overflow:"hidden",padding:"$small2 $small3 $small3 $small3",color:"$mono2",'[data-state="open"] &':{display:"block"},'[data-state="closed"] &':{display:"none"},variants:{special:{true:{padding:"$medium1"}}}}),I=n(r.Item,{breakInside:"avoid",pageBreakInside:"avoid",borderBottom:"1px solid rgba($secondary3RGB, 0.12)",variants:{isOpen:{true:{}},special:{true:(u={bc:"$background1",borderRadius:"$small",border:"1px solid $secondary3","@lg":{marginBottom:"$medium1"},"&:last-of-type":{marginBottom:"$none"},"@sm":{marginBottom:"$medium1"}},u["& ".concat(x)]={borderTop:"1px solid $secondary3"},u)}},compoundVariants:[{special:!0,isOpen:!0,css:(f={},f["& ".concat($)]={borderRadius:"$small"},f)},{special:!0,css:(g={},g["& ".concat($,":focus")]={borderRadius:"$small",boxShadow:"$focusPressed"},g)}]}),O=function(o){var n=o.headerAs,r=void 0===n?"span":n,d=o.special,u=o.openedIcon,f=void 0===u?i:u,g=o.closedIcon,v=void 0===g?s:g,O=o.children,k=o.value,S=o.subTitle,C=o.title,E=o.headerBackgroundColor,w=void 0===E?"$secondary0Hover":E,j=o.titleColor,B=void 0===j?"$secondary4":j,R=o.css,T=o.onClick,V=o.isOpen,H=o.icon,M=o.forceMount,P=p(o,["headerAs","special","openedIcon","closedIcon","children","value","subTitle","title","headerBackgroundColor","titleColor","css","onClick","isOpen","icon","forceMount"]),z=V?d?a:f:d?c:v,A=S?"flex-start":"center",G=S?"5px 10px 0 0":"0 10px 0 0";return e.createElement(I,m({special:d,isOpen:V,value:k,css:R,onClick:T},P),e.createElement(b,{as:r},e.createElement($,{type:"button",css:{"&[data-state=open]":{bc:w}},tabIndex:0},H&&e.createElement(y,{css:{alignSelf:A,margin:G},icon:H,iconSize:14}),e.createElement(t,{direction:"column",css:{flexGrow:1,display:"flex",justifyContent:"center"}},e.createElement(l,{as:"p",css:{justifySelf:"center",color:B},textStyle:"bodyMediumSemibold"},C),S&&e.createElement(l,{as:"span",textStyle:"bodySmallRegular",css:{color:"$neutral5"}},S)),e.createElement(h,{css:{color:B},icon:z,iconSize:16}))),e.createElement(x,{special:d,forceMount:M},O))},k=function(n){var r=n.special,t=void 0!==r&&r,l=n.children,a=void 0===l?[]:l,c=n.columns,i=void 0===c?1:c,s=n.css,d=n.openedIcon,u=n.closedIcon,f=p(n,["special","children","columns","css","openedIcon","closedIcon"]),g=e.useState((null==f?void 0:f.defaultValue)||""),b=g[0],$=g[1];return o((function(){(null==f?void 0:f.defaultValue)&&$(f.defaultValue)}),[f.defaultValue]),e.createElement(v,m({css:function(){var e,o=a.length||0,n=Math.round(o/i);return Number(i)>1?m(m({},s),((e={})["& > div:nth-child(".concat(n,"n)")]={breakAfter:"column"},e)):m({},s)}(),columns:i,onValueChange:function(e){$(e)}},f),a&&a.map((function(o){return e.createElement(O,m({special:t,subTitle:o.props.subTitle,icon:o.props.icon,key:o.props.value,closedIcon:u,openedIcon:d,isOpen:b.includes(o.props.value),onClick:o.props.onClick},o.props),o.props.children)})))};export{O as CollapseItem,k as default};