UNPKG

@snowball-tech/fractal

Version:

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

3 lines 4.68 kB
'use client'; import{e as $}from"./chunk-WJB4GYBF.js";import{a as z}from"./chunk-6S7RPWAM.js";import{a as c,d as x,e as y,f as I}from"./chunk-CTNPTC5G.js";import{c as A}from"./chunk-LYTTDLE2.js";import{a as v}from"./chunk-AOLTZ2WJ.js";import{b as u}from"./chunk-CMFNILWJ.js";import{a as S,b as e}from"./chunk-XYM7TA65.js";import{useMountEffect as le}from"@react-hookz/web";import{Border1 as M,ColorBackgroundBodyDark as O,ColorBackgroundBodyWhite as ne,ColorBaseGrey50 as me,ColorBaseGrey70 as he,ColorTextDark as ge,ColorTextLight as U,ShadowBrutal1 as fe,ShadowBrutal1Dark as pe,ShadowBrutal1Light as ue,ShadowBrutal2 as ce,ShadowBrutal2Dark as be,ShadowBrutal2Light as we,ShadowNone as E,SizeRadiusS as p}from"@snowball-tech/design-tokens/dist/web/typescript/design-tokens";import{SizeBorder1 as _,SizeSpacing2 as q,SizeSpacingHalf as Se,SizeSpacingQuarter as B}from"@snowball-tech/design-tokens/dist/web/typescript/design-tokens-px";import{UilAngleDown as ve}from"@tooni/iconscout-unicons-react";import{AnimatePresence as xe,motion as ye}from"motion/react";import{forwardRef as Ee,useState as G}from"react";import Be from"lodash/fp/isBoolean";import L from"lodash/fp/isFunction";import Le from"lodash/fp/isNumber";import V from"lodash/fp/isString";import ke from"lodash/fp/omit";import{jsx as l,jsxs as j}from"react/jsx-runtime";var r={"0":"rounded-sm shadow-none border-none",light:"rounded-sm shadow-none","1":"rounded-sm shadow-none","2":"rounded-sm shadow-subtle ml-quarter mb-quarter","3":"rounded-sm shadow-brutal ml-quarter mb-half"},Te={light:{"0":r["0"],light:e(r.light,"border-grey-70"),"1":r["1"],"2":e(r["2"],"shadow-subtle-light"),"3":e(r["3"],"shadow-brutal-light")},dark:{"0":r["0"],light:e(r.light,"border-grey-50"),"1":e(r["1"],"border-primary"),"2":e(r["2"],"shadow-subtle-dark"),"3":e(r["3"],"shadow-brutal-dark")}},t={"0":{border:"none",borderRadius:p,boxShadow:E},light:{borderRadius:p,boxShadow:E},"1":{borderRadius:p,boxShadow:E},"2":{borderRadius:p,boxShadow:fe,marginBottom:B,marginLeft:B},"3":{borderRadius:p,boxShadow:ce,marginBottom:Se,marginLeft:B}},W={light:{"0":t["0"],light:{...t.light,borderColor:he},"1":t["1"],"2":{...t["2"],boxShadow:ue},"3":{...t["3"],boxShadow:we}},dark:{"0":t["0"],light:{...t.light,borderColor:me},"1":t["1"],"2":{...t["2"],boxShadow:pe},"3":{...t["3"],boxShadow:be}}},K=Ee(({children:k,collapseButtonLabel:Q,collapsed:n,collapsible:m=!1,contentClassName:T,defaultCollapsed:X=!1,element:J="div",elevation:b=x,expandButtonLabel:Y,fullStyle:C=!1,inlineStyle:h=!1,onCollapse:P,onExpand:R,onToggle:F,theme:Z,title:d,titleClassName:ee,titleVariant:oe=I,toggleButtonLabel:re,...g},te)=>{let a=z(Z),[ae,ie]=G(!0);le(()=>{ie(!1)});let de=Le(b)?String(b):b,s=y[de];Object.keys(y).includes(s)||(s=x);let f=!!d,N=V(d)?d:A(d),[i,D]=G(n??X);Be(n)&&n!==i&&D(n);let w=()=>{L(F)&&F(!i),i&&L(R)?R():!i&&L(P)&&P(),D(!i)},H=f?l(v,{className:e("w-full text-left",m?"cursor-pointer":"",ee),element:V(d)?void 0:"div",variant:oe||"heading-4",children:d}):!1,se=m?l($,{className:"mt-half self-start",icon:l(ve,{className:S("transition-transform duration-600",i?"":"rotate-180")}),iconOnly:!0,label:re||(i?Y||"D\xE9plier":Q||"Replier"),variant:"text",onClick:o=>{o.preventDefault(),o.stopPropagation(),w()}}):!1;return j(v,{ref:te,"aria-label":N,className:e(`${u}-${c}`,`${u}-${c}--${s}`,f?`${u}-${c}--with-title`:"",!h&&"relative flex flex-col gap-2 border-1 border-normal p-2",m&&!f?"min-h-7 pr-5":"",!h&&Te[a][s],!h&&(a==="light"?"bg-white text-dark":"bg-body-dark text-light"),g.className),element:J||"div",fullStyle:C,inlineStyle:h,style:h?C?{boxSizing:"border-box",...W[a][s],backgroundColor:a==="light"?ne:O,border:M,borderWidth:_,color:a==="light"?ge:U,padding:q,...g.style}:{...W[a][s],backgroundColor:a==="light"?void 0:O,border:M,borderWidth:_,color:a==="light"?void 0:U,padding:q,...g.style}:g.style,title:N,...ke(["className","style"],g),children:[m?j("div",{className:S("flex items-center gap-1",f?"justify-between":"absolute right-2 top-2"),role:"button",tabIndex:-1,onClick:o=>{o.preventDefault(),o.stopPropagation(),w()},onKeyDown:o=>{(o.key==="Enter"||o.key===" ")&&(o.preventDefault(),o.stopPropagation(),w())},children:[H,se]}):H,m?l(xe,{children:!i&&l(ye.div,{animate:"expanded",className:e("flex size-full flex-col overflow-hidden",T),exit:"collapsed",initial:n||!ae?"collapsed":"expanded",transition:{duration:f?.4:.6,ease:"easeInOut"},variants:{collapsed:{height:0,opacity:0},expanded:{height:"auto",opacity:1}},children:k},"paper-content")}):l("div",{className:e("flex size-full flex-col",T),children:k})]})});K.displayName="Paper";var Ke=K;export{Te as a,W as b,K as c,Ke as d}; //# sourceMappingURL=chunk-YHZZRBQ2.js.map