@snowball-tech/fractal/dist/Toolbar/ToolbarButton.js

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

import{a as e}from"../constants-CW2-utNH.js";import{n as t,r as n}from"../helpers-DBEwVIlX.js";import{Typography as r}from"../Typography/Typography.js";import{r as i}from"../utils-K22C_6qC.js";import{GROUP_NAME as a}from"./Toolbar.constants.js";import{ToolbarContext as o}from"./ToolbarContext.js";import{forwardRef as s,useContext as c}from"react";import l from"lodash/fp/isEmpty.js";import u from"lodash/fp/isFunction.js";import d from"lodash/fp/isString.js";import f from"lodash/fp/omit.js";import{jsx as p,jsxs as m}from"react/jsx-runtime";import*as h from"@radix-ui/react-toolbar";const g=s(({active:s=!1,children:g,disabled:_=!1,fullWidth:v=!1,href:y,icon:b,iconOnly:x=!1,iconPosition:S=`left`,label:C,onClick:w,target:T,type:E=`button`,underlined:D,...O},k)=>{let A=!!b,j=!!g;!j&&!C&&console.warn("You must provide a `label` or `children` to the `ToolbarButton` component");let{disabled:M}=c(o),N=_||M,P=e=>{if(u(O.onTouchStart)){O.onTouchStart(e);return}`ontouchstart`in document.documentElement&&u(w)&&w(e)},F=e=>{u(O.onTouchEnd)&&O.onTouchEnd(e),`ontouchstart`in document.documentElement&&!u(O.onTouchStart)&&u(w)&&e.preventDefault()},I=!l(y),L=n(`${e}-${a}__button`,I?`${e}-${a}__button__link`:``,I||D===!1?`no-underline`:``,`flex h-3 max-h-3 min-h-3 max-w-full items-center justify-center gap-1 rounded-xs bg-transparent p-0 text-left outline-none transition-colors duration-300 ease-out active:transition-none`,v&&!x?`${e}-${a}__button--full-width w-full`:``,s&&!N?`text-dark`:N?`text-disabled`:`text-placeholder`,_?`${e}-${a}__button--disabled cursor-not-allowed`:`cursor-pointer hover:bg-decorative-pink-90 hover:text-dark`,A?`${e}-${a}__button--with-addendum ${e}-${a}__button--with-addendum-${S===`left`?`prefix`:`suffix`}`:``,x?`${e}-${a}__button--icon-only px-half`:v?``:`w-fit`,x?``:A?S===`left`?`pl-half pr-1`:`pl-1 pr-half`:`px-1`,O.className),R=p(`div`,{className:t(`${e}-${a}__button__icon`,`${e}-${a}__button__icon--${S}`,`mt-0 flex h-3 w-3 items-center [&>svg]:h-3`,I?`${e}-${a}__button__link__icon--${S}`:``),children:b}),z=m(r,{className:t(`${e}-${a}__button__label`,I?`${e}-${a}__button__link__label`:``,`flex max-h-full max-w-full flex-1 items-center justify-center gap-half overflow-hidden text-ellipsis whitespace-nowrap pt-0 text-center align-middle`,D===!1?`no-underline`:I?`underline`:``,N?`${e}-${a}__button__label--disabled cursor-not-allowed`:`cursor-pointer`),element:`div`,variant:s?`body-1-median`:`body-1`,children:[A&&S===`left`&&R,x?!1:j?g:p(`div`,{className:`min-w-0 truncate`,children:C}),A&&S===`right`&&R]}),B=d(C)?C:l(C)?i(g):i(C);return I?p(`a`,{...O.id===void 0?{}:{id:O.id},"aria-label":B,className:L,href:y,...l(T)?{}:{target:T},title:B,...!_&&u(w)?{onClick:w}:{},...f([`className`,`id`],O),children:x?R:z}):p(h.Button,{...O.id===void 0?{}:{id:O.id},ref:k,"aria-label":B,className:L,...O.dir===void 0?{}:{dir:O.dir},disabled:N,title:B,type:E,onTouchEnd:F,onTouchStart:P,...u(w)?{onClick:w}:{},...f([`className`,`dir`,`id`,`onTouchEnd`,`onTouchStart`],O),children:x?R:z})});g.displayName=`ToolbarButton`;export{g as ToolbarButton,g as default};
//# sourceMappingURL=ToolbarButton.js.map