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