UNPKG

@snowball-tech/fractal

Version:

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

3 lines 9.76 kB
'use client'; import{a as ee}from"./chunk-6S7RPWAM.js";import{a as r,c as ae}from"./chunk-FLEDU6MK.js";import{a as O}from"./chunk-UC7BXZ7T.js";import{a as $,b as a}from"./chunk-CMFNILWJ.js";import{a as L,b as Z}from"./chunk-KHPUS472.js";import{composeRefs as ue}from"@radix-ui/react-compose-refs";import{Border1 as b,BorderTransparent2 as re,ColorBackgroundDisabled as te,ColorBaseGrey30 as be,ColorBaseTransparent as M,ColorBaseWhite as p,ColorBorderDisabled as R,ColorBorderLight as pe,ColorBrandPrimaryDark as xe,ColorBrandSecondary as fe,ColorTextDark as w,ColorTextDisabled as k,ColorTextLight as j,ShadowBrutal1 as $e,ShadowBrutal1Dark as we,ShadowNone as N,SizeRadiusRounded as ye,SizeSpacing1 as h,SizeSpacing2 as oe,SizeSpacing3 as t,SizeSpacing6 as T,SizeSpacingHalf as m,SizeSpacingQuarter as e}from"@snowball-tech/design-tokens/dist/web/typescript/design-tokens";import{createElement as ke,forwardRef as Te,useRef as Se}from"react";import I from"lodash/fp/isEmpty";import S from"lodash/fp/isFunction";import W from"lodash/fp/omit";import{jsx as H,jsxs as Be}from"react/jsx-runtime";var ve={light:{display:"bg-white text-dark shadow-subtle hover:shadow-brutal focus:shadow-brutal active:shadow-none border-1 border-normal active:-translate-x-quarter active:translate-y-half hover:translate-x-0 hover:-translate-y-quarter focus:translate-x-0 focus:-translate-y-quarter px-[calc(theme(spacing.3)-theme(spacing.quarter))] py-[calc(theme(spacing.1)-theme(spacing.quarter))]",primary:"bg-secondary hover:bg-white active:bg-primary focus:bg-white active:!border-transparent text-light hover:text-dark active:text-dark focus:text-dark border-2 border-transparent hover:border-normal focus:border-normal px-[calc(theme(spacing.3)-theme(spacing.half))] py-half",secondary:"bg-white active:bg-secondary text-dark active:text-light hover:shadow-hover focus:shadow-hover active:shadow-hover border-1 border-normal px-[calc(theme(spacing.3)-theme(spacing.quarter))] py-[calc(theme(spacing.1)-theme(spacing.quarter))]",text:"bg-transparent text-dark"},dark:{display:"bg-white text-dark shadow-subtle-dark hover:shadow-brutal-dark focus:shadow-brutal-dark active:shadow-none border-1 border-normal active:-translate-x-quarter active:translate-y-half hover:translate-x-0 hover:-translate-y-quarter focus:translate-x-0 focus:-translate-y-quarter px-[calc(theme(spacing.3)-theme(spacing.quarter))] py-[calc(theme(spacing.1)-theme(spacing.quarter))]",primary:"bg-primary-dark hover:bg-light active:bg-primary-dark focus:bg-light active:!border-transparent text-dark hover:text-dark active:text-light focus:text-dark border-2 border-transparent hover:border-light focus:border-light px-[calc(theme(spacing.3)-theme(spacing.half))] py-half",secondary:"bg-white active:bg-primary-dark text-dark active:text-light border-1 border-light px-[calc(theme(spacing.3)-theme(spacing.quarter))] py-[calc(theme(spacing.1)-theme(spacing.quarter))]",text:"bg-transparent text-light"}},Ce={light:{display:{backgroundColor:p,border:b,boxShadow:$e,color:w,padding:`calc(${h} - ${e}) calc(${t} - ${e})`},primary:{backgroundColor:fe,border:re,color:j,padding:`${m} calc(${t} - ${m})`},secondary:{backgroundColor:p,border:b,color:w,padding:`calc(${h} - ${e}) calc(${t} - ${e})`},text:{backgroundColor:M,color:w}},dark:{display:{backgroundColor:p,border:b,boxShadow:we,color:w,padding:`calc(${h} - ${e}) calc(${t} - ${e})`},primary:{backgroundColor:xe,border:re,color:w,padding:`${m} calc(${t} - ${m})`},secondary:{backgroundColor:p,border:b,borderColor:pe,color:w,padding:`calc(${h} - ${e}) calc(${t} - ${e})`},text:{backgroundColor:M,color:j}}},Ee={light:{display:"bg-white text-disabled shadow-none border-1 border-disabled px-[calc(theme(spacing.3)-theme(spacing.quarter))] py-[calc(theme(spacing.1)-theme(spacing.quarter))]",primary:"bg-disabled text-light px-[calc(theme(spacing.3)-theme(spacing.half))] py-half",secondary:"bg-white text-disabled shadow-none border-1 border-disabled px-[calc(theme(spacing.3)-theme(spacing.quarter))] py-[calc(theme(spacing.1)-theme(spacing.quarter))]",text:"bg-transparent text-disabled"},dark:{display:"bg-white text-disabled shadow-none border-1 border-disabled px-[calc(theme(spacing.3)-theme(spacing.quarter))] py-[calc(theme(spacing.1)-theme(spacing.quarter))]",primary:"bg-disabled text-disabled px-[calc(theme(spacing.3)-theme(spacing.half))] py-half",secondary:"bg-white text-disabled shadow-none border-1 border-disabled px-[calc(theme(spacing.3)-theme(spacing.quarter))] py-[calc(theme(spacing.1)-theme(spacing.quarter))]",text:"bg-transparent text-grey-30"}},_e={light:{display:{backgroundColor:p,border:b,borderColor:R,boxShadow:N,color:k,padding:`calc(${h} - ${e}) calc(${t} - ${e})`},primary:{backgroundColor:te,color:j,padding:`${m} calc(${t} - ${m})`},secondary:{backgroundColor:p,border:b,borderColor:R,boxShadow:N,color:k,padding:`calc(${h} - ${e}) calc(${t} - ${e})`},text:{backgroundColor:M,color:k}},dark:{display:{backgroundColor:p,border:b,borderColor:R,boxShadow:N,color:k,padding:`calc(${h} - ${e}) calc(${t} - ${e})`},primary:{backgroundColor:te,color:k,padding:`${m} calc(${t} - ${m})`},secondary:{backgroundColor:p,border:b,borderColor:R,boxShadow:N,color:k,padding:`calc(${h} - ${e}) calc(${t} - ${e})`},text:{backgroundColor:M,color:be}}},de=Te(({children:G,disabled:E=!1,element:v,fullWidth:_=!1,href:U,icon:Q,iconOnly:d=!1,iconPosition:x="right",iconResponsive:g=!1,inlineStyle:c=!1,label:u,onClick:C,target:X,theme:ce,truncate:B=!0,type:ne="button",underlined:D,variant:i=ae,wrap:y=!1,wrapperClassName:le,wrapperStyles:ie,...o},se)=>{let q=ee(ce),l=!!Q,Y=!!G;!Y&&I(u)&&console.warn("You must provide a `label` or `children` to the `Button` component");let J=Se(null),P=ue(se,J),K=f=>{!E&&S(C)&&C(f),J.current?.blur()},he=f=>{if(S(o.onTouchStart)){o.onTouchStart(f);return}"ontouchstart"in document.documentElement&&S(C)&&C(f)},me=f=>{S(o.onTouchEnd)&&o.onTouchEnd(f),"ontouchstart"in document.documentElement&&!S(o.onTouchStart)&&S(C)&&f.preventDefault()},s=!I(U),n=i==="text",z=c?`${a}-${r} ${a}-${r}--${i}`:Z(`${a}-${r}`,`${a}-${r}--${i}`,s?`${a}-${r}__link ${a}-${r}__link--${i}`:"",s&&!n||D===!1?"no-underline":"","flex max-w-full items-center justify-center gap-2 rounded-full outline-none transition-colors duration-300 ease-out active:transition-none appearance-none box-border px-unset",y?"":"max-h-6",n?"min-h-3":"min-h-6",_&&(!d||!l)?`${a}-${r}--full-width w-full`:"",E?`${a}-${r}--disabled cursor-not-allowed ${Ee[q][i]}`:`${ve[q][i]} cursor-pointer`,l?`${a}-${r}--with-addendum ${a}-${r}--with-addendum-${x==="left"?"prefix":"suffix"}`:"",d&&l?`${a}-${r}--icon-only w-6 max-w-6 max-h-6 h-6`:_?"":"w-fit",d&&l&&n?"w-3 max-w-3 h-3 max-h-3":"",o.className),A=c?{appearance:"none",borderRadius:ye,boxSizing:"border-box",display:s?"inline-block":void 0,outline:"none",paddingLeft:"unset",paddingRight:"unset",transition:"color, background-color, border-color 300ms ease-out",...s&&!n?{textDecoration:"none"}:{},...y?{}:{maxHeight:T},...n?{minHeight:t}:{minHeight:T},...E?{cursor:"not-allowed",..._e[q][i]}:{cursor:"pointer",...Ce[q][i]},...d&&l?{height:T,maxHeight:T,maxWidth:T,padding:s?`calc(${h} + ${e}) 0 0 calc(${h} + ${e})`:`${m} 0 0 ${e}`,width:T}:_?{}:{width:"fit-content"},...d&&l&&n?{height:t,maxHeight:t,maxWidth:t,width:t}:{},..._?{maxWidth:"100%",width:"100%"}:{},...s&&n?{color:w}:{}}:void 0,F=H("div",{className:L(`${a}-${r}__icon`,`${a}-${r}__icon--${x}`,!c&&"h-3 w-3 items-center [&>svg]:h-3",!c&&s?`${a}-${r}__link__icon--${x}`:"",!c&&n?"mt-0":"",g===!1?"flex":"hidden",!d&&(g===$.xxs||g===!0)?"xs:flex":"",!d&&g===$.xs?"sm:flex":"",!d&&g===$.sm?"md:flex":"",!d&&g===$.md?"lg:flex":"",!d&&g===$.lg?"xl:flex":"",!d&&g===$.xl?"xxl:flex":""),style:c?{boxSizing:"border-box",display:"inline-block",height:t,width:t,...n?{marginTop:0}:{},...x==="left"&&(!d||!l)?{marginRight:oe}:{},...x==="right"&&(!d||!l)?{marginLeft:oe}:{}}:void 0,children:Q}),ge=Be(O,{className:L(`${a}-${r}__label`,`${a}-${r}__label--${i}`,!c&&s?`${a}-${r}__link__label ${a}-${r}__link__label--${i}`:"",!c&&"flex max-h-full max-w-full flex-1 items-center justify-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap text-center align-middle",!c&&n?"pt-0":"",!c&&D===!1?"no-underline":"",le),element:"div",inlineStyle:c,style:c?{boxSizing:"border-box",marginTop:n?"0":`calc(${m} + ${e})`,maxHeight:"100%",maxWidth:"100%",overflow:"hidden",textAlign:"center",textOverflow:"ellipsis",verticalAlign:"middle",whiteSpace:"nowrap",...n?{paddingTop:0}:{},...D===!1?{textDecoration:"none"}:{},...ie}:void 0,variant:n?"body-1-link":"body-1-median",children:[l&&x==="left"&&F,d&&l?!1:Y?G:H("div",{className:c?void 0:L(y||B?"min-w-0":"",y?"whitespace-break-spaces":"",B?"truncate":""),style:c?{boxSizing:"border-box",display:"inline-block",...y||B?{minWidth:0}:{},...y?{whiteSpace:"break-spaces"}:{},...B?{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}:{},...n&&D!==!1?{textDecoration:"underline"}:{}}:void 0,children:u}),l&&x==="right"&&F]}),V=d&&l?F:ge;return v&&v!=="a"&&v!=="button"&&!s?ke(v,{"aria-label":u,className:z,ref:P,style:{...A,...o.style},title:u,...W(["className","style"],o)},V):s||v==="a"?H("a",{...o.id===void 0?{}:{id:o.id},ref:P,"aria-label":u,className:z,href:U,...I(X)?{}:{target:X},style:{...A,...o.style},title:u,onClick:K,...W(["className","id","style"],o),children:V}):H("button",{...o.id===void 0?{}:{id:o.id},ref:P,"aria-label":u,className:z,...o.dir===void 0?{}:{dir:o.dir},disabled:E,style:{...A,...o.style},title:u,type:ne,onClick:K,onTouchEnd:me,onTouchStart:he,...W(["className","dir","id","style","onTouchEnd","onTouchStart"],o),children:V})});de.displayName="Button";var We=de;export{ve as a,Ce as b,Ee as c,_e as d,de as e,We as f}; //# sourceMappingURL=chunk-4JB6HFZC.js.map