@snowball-tech/fractal/dist/src/components/Button/Button.js

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

"use client";import{Breakpoints as e,PREFIX as t}from"../../constants.js";import{cj as n,cn as r}from"../../styles/helpers.js";import i from"../Typography/Typography.js";import{onlyText as a}from"../../utils.js";import ee from"../../hooks/useTheme.js";import{DEFAULT_VARIANT as te,GROUP_NAME as o,variantClassNames as ne,variantDisabledClassNames as re,variantDisabledStyles as s,variantStyles as c}from"./Button.constants.js";import{createElement as ie,forwardRef as l,useImperativeHandle as ae,useRef as oe}from"react";import u from"lodash/fp/isEmpty.js";import d from"lodash/fp/isFunction.js";import se from"lodash/fp/isString.js";import f from"lodash/fp/omit.js";import{ColorTextDark as ce,SizeRadiusRounded as le}from"@snowball-tech/design-tokens/dist/web/typescript/design-tokens.js";import{SizeSpacing1 as p,SizeSpacing2 as m,SizeSpacing3 as h,SizeSpacing6 as g,SizeSpacingHalf as _,SizeSpacingQuarter as v}from"@snowball-tech/design-tokens/dist/web/typescript/design-tokens-px.js";import{jsx as y,jsxs as ue}from"react/jsx-runtime";const b=l(({children:l,disableClickTracking:b=!1,disabled:x=!1,element:S,fullStyle:C=!1,fullWidth:w=!1,href:T,icon:E,iconHidden:D=!1,iconOnly:O=!1,iconPosition:k=`right`,inlineStyle:A=!1,label:j,onClick:M,target:N,theme:de,truncate:P=!0,type:fe=`button`,underlined:F,variant:I=te,wrap:L=!1,wrapperClassName:pe,wrapperStyles:R,...z},me)=>{let B=ee(de),V=!!E,H=!!l;!H&&!j&&console.warn("You must provide a `label` or `children` to the `Button` component");let U=oe(null);ae(me,()=>U.current);let W=e=>{!x&&d(M)&&M(e),U.current?.blur()},he=e=>{if(d(z.onTouchStart)){z.onTouchStart(e);return}`ontouchstart`in document.documentElement&&d(M)&&M(e)},ge=e=>{d(z.onTouchEnd)&&z.onTouchEnd(e),`ontouchstart`in document.documentElement&&!d(z.onTouchStart)&&d(M)&&e.preventDefault()},G=!u(T),K=I===`text`,q=e=>{if(O===!1||O===`xxs`)return!1;if(O===!0)return!0;let t=[`xxs`,`xs`,`sm`,`md`,`lg`,`xl`,`xxl`],n=t.indexOf(O===`auto`?`md`:O);return t.indexOf(e)<n},J=e=>{if(D===!1)return!1;if(D===!0||D===`xxs`)return!0;let t=[`xxs`,`xs`,`sm`,`md`,`lg`,`xl`,`xxl`],n=t.indexOf(D);return t.indexOf(e)<n},_e=()=>{let e=q(`xxs`),t=J(`xxs`);return e||!e&&!t?`flex`:`hidden`},ve=()=>{let e=[],t=[{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`}],n=q(`xxs`)||!q(`xxs`)&&!J(`xxs`);return t.forEach(t=>{let r=q(t.bp),i=J(t.bp),a=r||!r&&!i;a!==n&&(a?e.push(t.class):e.push(t.hideClass),n=a)}),e.join(` `)},Y=()=>{if(O===!0)return[`hidden`];if(O===!1||O===`xxs`)return[];let e={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:``}[O];return e?[e]:[]},X=A?r(`${t}-${o} ${t}-${o}--${I}${G?` ${t}-${o}__link`:``}`,z.className):r(`${t}-${o}`,`${t}-${o}--${I}`,G?`${t}-${o}__link ${t}-${o}__link--${I}`:``,G&&!K||F===!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`,L?``:`max-h-6`,K?`min-h-3`:`min-h-6`,w?`${t}-${o}--full-width w-full`:`w-fit`,x?`${t}-${o}--disabled cursor-not-allowed ${re[B][I]}`:`${ne[B][I]} cursor-pointer`,V?`${t}-${o}--with-addendum ${t}-${o}--with-icon ${t}-${o}--with-addendum-${k===`left`?`prefix`:`suffix`} ${t}-${o}--with-icon-${k===`left`?`prefix`:`suffix`}`:``,V&&O&&O!==`xxs`?O===!0?`${t}-${o}--icon-only`:O===`auto`?`${t}-${o}--icon-only--auto ${t}-${o}--icon-only--md`:`${t}-${o}--icon-only--${String(O)}`:``,V&&O&&O!==`xxs`?O===!0?K?`w-3 max-w-3 h-3 max-h-3 px-0`:`w-6 max-w-6 max-h-6 h-6 px-0`:O===e.xs?K?`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`:O===e.sm?K?`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`:O===`auto`||O===e.md?K?`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`:O===e.lg?K?`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`:O===e.xl?K?`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`:O===e.xxl?K?`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`:``:``,z.className),Z=A?C?{appearance:`none`,borderRadius:le,boxSizing:`border-box`,display:G?`inline-block`:void 0,outline:`none`,paddingLeft:`unset`,paddingRight:`unset`,transition:`color, background-color, border-color 300ms ease-out`,...G&&!K?{textDecoration:`none`}:{},...L?{}:{maxHeight:g},...K?{minHeight:h}:{minHeight:g},...x?{cursor:`not-allowed`,...s[B][I]}:{cursor:`pointer`,...c[B][I]},...O&&O!==`xxs`&&V?{height:g,maxHeight:g,maxWidth:g,padding:G?`calc(${p} + ${v}) 0 0 calc(${p} + ${v})`:`${_} 0 0 ${v}`,width:g}:w?{}:{width:`fit-content`},...O&&O!==`xxs`&&V&&K?{height:h,maxHeight:h,maxWidth:h,width:h}:{},...w?{maxWidth:`100%`,width:`100%`}:{},...G&&K?{color:ce}:{}}:{...L?{}:{maxHeight:g},...K?{minHeight:h}:{minHeight:g},...x?{cursor:`not-allowed`,...s[B][I]}:{...c[B][I]},...O&&O!==`xxs`&&V?{height:g,maxHeight:g,maxWidth:g,padding:G?`calc(${p} + ${v}) 0 0 calc(${p} + ${v})`:`${_} 0 0 ${v}`,width:g}:w?{}:{width:`fit-content`},...O&&O!==`xxs`&&V&&K?{height:h,maxHeight:h,maxWidth:h,width:h}:{},...w?{maxWidth:`100%`,width:`100%`}:{}}:void 0,ye=y(`div`,{className:n(`${t}-${o}__icon`,`${t}-${o}__icon--${k}`,!A&&`h-3 w-3 items-center [&>svg]:h-3`,!A&&G?`${t}-${o}__link__icon--${k}`:``,!A&&K?`mt-0`:``,_e(),ve()),style:A?C?{boxSizing:`border-box`,display:`inline-block`,height:h,maxHeight:h,maxWidth:h,minHeight:h,minWidth:h,width:h,...K?{marginTop:0}:{},...k===`left`&&(!O||!V||O===`xxs`)?{marginRight:m}:{},...k===`right`&&(!O||!V||O===`xxs`)?{marginLeft:m}:{}}:{...k===`left`&&(!O||!V||O===`xxs`)?{marginRight:m}:{},...k===`right`&&(!O||!V||O===`xxs`)?{marginLeft:m}:{}}:void 0,children:E}),Q=ue(i,{className:n(`${t}-${o}__label`,`${t}-${o}__label--${I}`,!A&&G?`${t}-${o}__link__label ${t}-${o}__link__label--${I}`:``,!A&&`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`,!A&&K?`pt-0`:``,!A&&F===!1?`no-underline`:``,pe),element:`div`,inlineStyle:A,style:A?C?{boxSizing:`border-box`,marginTop:K?`0`:`calc(${_} + ${v})`,maxHeight:`100%`,maxWidth:`100%`,overflow:`hidden`,textAlign:`center`,textOverflow:`ellipsis`,verticalAlign:`middle`,whiteSpace:`nowrap`,...K?{paddingTop:0}:{},...F===!1?{textDecoration:`none`}:{},...R}:{...F===!1?{textDecoration:`none`}:{},...R}:void 0,variant:K?`body-1-link`:`body-1-median`,children:[V&&k===`left`&&ye,O===!0&&V?!1:H?O===!1||O===`xxs`||!V?l:y(`div`,{className:n(...Y()),children:l}):y(`div`,{className:A?void 0:n(L||P?`min-w-0`:``,L?`whitespace-break-spaces`:``,P?`truncate`:``,...Y()),style:A?{boxSizing:`border-box`,display:`inline-block`,...L||P?{minWidth:0}:{},...L?{whiteSpace:`break-spaces`}:{},...P?{overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`}:{},...K&&F!==!1?{textDecoration:`underline`}:{}}:void 0,children:j}),V&&k===`right`&&ye]}),$=se(j)?j:u(j)?a(l):a(j);return S&&S!==`a`&&S!==`button`&&!G?ie(S,{...z.id===void 0?{}:{id:z.id},"aria-label":$,className:X,disabled:x,onClick:W,ref:U,style:{...Z,...z.style},title:$,...f([`className`,`style`,`id`],z)},Q):G||S===`a`?y(`a`,{...z.id===void 0?{}:{id:z.id},ref:U,"aria-label":$,className:X,href:T,...u(N)?{}:{target:N},style:{...Z,...z.style},title:$,onClick:W,...f([`className`,`id`,`style`],z),...!u(T)&&b?{clicktracking:`off`}:{},children:Q}):y(`button`,{...z.id===void 0?{}:{id:z.id},ref:U,"aria-label":$,className:X,...z.dir===void 0?{}:{dir:z.dir},disabled:x,style:{...Z,...z.style},title:$,type:fe,onClick:W,onTouchEnd:ge,onTouchStart:he,...f([`className`,`dir`,`id`,`style`,`onTouchEnd`,`onTouchStart`],z),children:Q})});b.displayName=`Button`;export{b as default};
//# sourceMappingURL=Button.js.map