UNPKG

@snowball-tech/fractal

Version:

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

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