UNPKG

@snowball-tech/fractal

Version:

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

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