@snowball-tech/fractal/dist/Paper/Paper.js

Fractal's (Snowball's design system) React component library based on RadixUI and TailwindCSS

"use client";import{a as e}from"../constants-CW2-utNH.js";import{n as t,r as n}from"../helpers-DBEwVIlX.js";import{Typography as r}from"../Typography/Typography.js";import{r as ee}from"../utils-K22C_6qC.js";import{DEFAULT_TITLE_VARIANT as te,ELEVATIONS as i,GROUP_NAME as a,elevationClassNames as ne,elevationStyles as o}from"./Paper.constants.js";import{t as s}from"../useTheme-TjNOC1gT.js";import{Button as c}from"../Button/Button.js";import{forwardRef as l,useState as u}from"react";import d from"lodash/fp/isFunction.js";import f from"lodash/fp/isString.js";import p from"lodash/fp/omit.js";import{Border1 as m,ColorBackgroundBodyDark as h,ColorBackgroundBodyWhite as re,ColorTextDark as ie,ColorTextLight as g}from"@snowball-tech/design-tokens/dist/web/typescript/design-tokens.js";import{SizeBorder1 as _,SizeSpacing2 as v}from"@snowball-tech/design-tokens/dist/web/typescript/design-tokens-px.js";import{jsx as y,jsxs as b}from"react/jsx-runtime";import{UilAngleDown as x}from"@tooni/iconscout-unicons-react";import S from"lodash/fp/isNumber.js";import C from"lodash/fp/isBoolean.js";import{useMountEffect as w}from"@react-hookz/web";import{AnimatePresence as T,motion as E}from"motion/react";const D=l(({children:l,collapseButtonLabel:D,collapsed:O,collapsible:k=!1,contentClassName:A,defaultCollapsed:ae=!1,element:oe=`div`,elevation:j=`1`,expandButtonLabel:M,fullStyle:N=!1,inlineStyle:P=!1,onCollapse:F,onExpand:I,onToggle:L,theme:R,title:z,titleClassName:B,titleVariant:V=te,toggleButtonLabel:H,...U},W)=>{let G=s(R),[K,se]=u(!0);w(()=>{se(!1)});let q=i[S(j)?String(j):j];Object.keys(i).includes(q)||(q=`1`);let J=!!z,Y=f(z)?z:ee(z),[X,Z]=u(O??ae);C(O)&&O!==X&&Z(O);let Q=()=>{d(L)&&L(!X),X&&d(I)?I():!X&&d(F)&&F(),Z(!X)},$=J?y(r,{className:n(`w-full text-left`,k?`cursor-pointer`:``,B),element:f(z)?void 0:`div`,variant:V||`heading-4`,children:z}):!1,ce=k?y(c,{className:`mt-half self-start`,icon:y(x,{className:t(`transition-transform duration-600`,X?``:`rotate-180`)}),iconOnly:!0,label:H||(X?M||`Déplier`:D||`Replier`),variant:`text`,onClick:e=>{e.preventDefault(),e.stopPropagation(),Q()}}):!1;return b(r,{ref:W,"aria-label":Y,className:n(`${e}-${a}`,`${e}-${a}--${q}`,J?`${e}-${a}--with-title`:``,!P&&`relative flex flex-col gap-2 border-1 border-normal p-2`,k&&!J?`min-h-7 pr-5`:``,!P&&ne[G][q],!P&&(G===`light`?`bg-white text-dark`:`bg-body-dark text-light`),U.className),element:oe||`div`,fullStyle:N,inlineStyle:P,style:P?N?{boxSizing:`border-box`,...o[G][q],backgroundColor:G===`light`?re:h,border:m,borderWidth:_,color:G===`light`?ie:g,padding:v,...U.style}:{...o[G][q],backgroundColor:G===`light`?void 0:h,border:m,borderWidth:_,color:G===`light`?void 0:g,padding:v,...U.style}:U.style,title:Y,...p([`className`,`style`],U),children:[k?b(`div`,{className:t(`flex items-center gap-1`,J?`justify-between`:`absolute right-2 top-2`),role:`button`,tabIndex:-1,onClick:e=>{e.preventDefault(),e.stopPropagation(),Q()},onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),e.stopPropagation(),Q())},children:[$,ce]}):$,k?y(T,{children:!X&&y(E.div,{animate:`expanded`,className:n(`flex size-full flex-col overflow-hidden`,A),exit:`collapsed`,initial:O||!K?`collapsed`:`expanded`,transition:{duration:J?.4:.6,ease:`easeInOut`},variants:{collapsed:{height:0,opacity:0},expanded:{height:`auto`,opacity:1}},children:l},`paper-content`)}):y(`div`,{className:n(`flex size-full flex-col`,A),children:l})]})});D.displayName=`Paper`;export{D as Paper,D as default};
//# sourceMappingURL=Paper.js.map