@tidy-ui/button/dist/index.esm.js

A Button is like a magic wand for websites. When you click it, cool things happen! It can send forms, pop up chats, undo stuff, or even whisk you away to new places on the web. So, it's your go-to for making things tick and getting stuff done with a simpl

import n from"react";import{css as e,hsla as t,styled as r,applyStandardOverrideStyles as o,Icon as i}from"@tidy-ui/commons";var a=function(){return a=Object.assign||function(n){for(var e,t=1,r=arguments.length;t<r;t++)for(var o in e=arguments[t])Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},a.apply(this,arguments)};function d(n,e){var t={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&e.indexOf(r)<0&&(t[r]=n[r]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(n);o<r.length;o++)e.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(n,r[o])&&(t[r[o]]=n[r[o]])}return t}function l(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}var s,c,p,m,u,h,f,b,g,x,y,v,w,k,O,z,j,E,S,I,P,B,L,D,R,C,N,G,U,A,V,F,M,_,q,H,J,K,Q,T,W,X,Y,Z,$,nn,en,tn,rn,on,an,dn,ln,sn,cn,pn,mn,un,hn,fn,bn,gn,xn,yn,vn,wn={lg:{fontSize:"1.25rem"},md:{fontSize:"0.875rem"},sm:{fontSize:"0.75rem"},xl:{fontSize:"1.75rem"},xs:{fontSize:"0.625rem"},xxl:{fontSize:"2rem"},xxs:{fontSize:"0.5rem"}},kn=e(p||(p=l(["\n  ","\n"],["\n  ","\n"])),function(n){var t=n.theme,r=t.palette,o=t.isDark,i=n.tone,a=n.disabled;return e(c||(c=l(["\n    color: ",";\n    background-color: transparent;\n    border: none;\n    ","\n  "],["\n    color: ",";\n    background-color: transparent;\n    border: none;\n    ","\n  "])),o?r[i][400]:r[i][800],!a&&e(s||(s=l(["\n      &:hover {\n        background-color: ",";\n      }\n    "],["\n      &:hover {\n        background-color: ",";\n      }\n    "])),o?r[i][900]:r[i][200]))}),On=e(f||(f=l(["\n  ","\n"],["\n  ","\n"])),function(n){var r=n.theme,o=r.palette,i=r.isDark,a=n.tone,d=n.disabled;return e(h||(h=l(["\n    font-weight: 600;\n    color: ",";\n    background-color: ",";\n    border: 1px solid ",";\n    ","\n    ","\n  "],["\n    font-weight: 600;\n    color: ",";\n    background-color: ",";\n    border: 1px solid ",";\n    ","\n    ","\n  "])),o[a][50],o[a][700],t(o[a].shades[900],.4),!i&&e(m||(m=l(["\n      box-shadow: 0px 1px 0px ",";\n    "],["\n      box-shadow: 0px 1px 0px ",";\n    "])),o[a][100]),!d&&e(u||(u=l(["\n      &:hover {\n        background-color: ",";\n      }\n    "],["\n      &:hover {\n        background-color: ",";\n      }\n    "])),o[a][800]))}),zn=e(x||(x=l(["\n  ","\n"],["\n  ","\n"])),function(n){var r=n.theme,o=r.palette,i=r.isDark,a=n.tone,d=n.disabled;return e(g||(g=l(["\n    color: ",";\n    border: 1px solid ",";\n    ","\n  "],["\n    color: ",";\n    border: 1px solid ",";\n    ","\n  "])),i?o[a][100]:o[a][900],i?o[a][700]:o[a][400],!d&&e(b||(b=l(["\n      &:hover {\n        background-color: ",";\n        border: 1px solid ",";\n      }\n    "],["\n      &:hover {\n        background-color: ",";\n        border: 1px solid ",";\n      }\n    "])),i?t(o[a].shades[800],.2):o[a][100],i?o[a][400]:o[a][900]))}),jn=e(j||(j=l(["\n  ","\n"],["\n  ","\n"])),function(n){var t=n.theme,r=t.palette,o=t.isDark,i=n.tone,a=n.disabled,d=n.isGradient;return e(z||(z=l(["\n    padding: 1rem 1.5rem;\n    font-size: 3rem;\n    line-height: 3rem;\n    color: ",";\n    border: none;\n    width: 100%;\n    ","\n    ","\n  "],["\n    padding: 1rem 1.5rem;\n    font-size: 3rem;\n    line-height: 3rem;\n    color: ",";\n    border: none;\n    width: 100%;\n    ","\n    ","\n  "])),r[i][50],!a&&e(w||(w=l(["\n      ","\n    "],["\n      ","\n    "])),o?e(y||(y=l(["\n            box-shadow: 0 0 24px ",";\n          "],["\n            box-shadow: 0 0 24px ",";\n          "])),r[i][800]):e(v||(v=l(["\n            box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n              "," 0px 10px 15px -3px, "," 0px 4px 6px -4px;\n          "],["\n            box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n              "," 0px 10px 15px -3px, "," 0px 4px 6px -4px;\n          "])),r[i][300],r[i][300])),d?e(k||(k=l(["\n          background: linear-gradient(90deg, "," 0%, "," 100%);\n          &:hover {\n            background: linear-gradient(90deg, "," 0%, "," 100%);\n          }\n        "],["\n          background: linear-gradient(90deg, "," 0%, "," 100%);\n          &:hover {\n            background: linear-gradient(90deg, "," 0%, "," 100%);\n          }\n        "])),r.major[700],r.minor[700],r.major[800],r.minor[800]):e(O||(O=l(["\n          background-color: ",";\n          &:hover {\n            background-color: ",";\n          }\n        "],["\n          background-color: ",";\n          &:hover {\n            background-color: ",";\n          }\n        "])),r[i][700],r[i][800]))}),En=e(S||(S=l(["\n  ","\n"],["\n  ","\n"])),function(n){var t=n.theme,r=t.palette,o=t.isDark,i=n.tone;return e(E||(E=l(["\n    color: ",";\n  "],["\n    color: ",";\n  "])),o?r[i][400]:r[i][800])}),Sn=e(P||(P=l(["\n  ","\n"],["\n  ","\n"])),function(n){var t=n.theme,r=t.palette,o=t.isDark,i=n.tone;return e(I||(I=l(["\n    &:focus-visible {\n      outline: 1px solid ",";\n      outline-offset: 1px;\n    }\n  "],["\n    &:focus-visible {\n      outline: 1px solid ",";\n      outline-offset: 1px;\n    }\n  "])),o?r[i][400]:r[i][800])}),In=r.a(R||(R=l(["\n  ","\n  ","\n"],["\n  ","\n  ","\n"])),function(n){var r=n.theme,o=r.palette,i=r.isDark,a=n.disabled,d=n.girth,s=n.tone;return e(D||(D=l(["\n    margin: 0 0.5ch;\n    display: inline-block;\n    text-decoration: none;\n    padding: 0.2em 0.3em;\n    line-height: 1.5em;\n    font-size: calc("," + 0.125rem);\n    color: ",";\n    ","\n  "],["\n    margin: 0 0.5ch;\n    display: inline-block;\n    text-decoration: none;\n    padding: 0.2em 0.3em;\n    line-height: 1.5em;\n    font-size: calc("," + 0.125rem);\n    color: ",";\n    ","\n  "])),wn[d].fontSize,i?o[s][400]:o[s][600],a?e(B||(B=l(["\n          cursor: not-allowed;\n          pointer-events: none;\n          opacity: 0.6;\n        "],["\n          cursor: not-allowed;\n          pointer-events: none;\n          opacity: 0.6;\n        "]))):e(L||(L=l(["\n          background-image: linear-gradient(\n            ",",\n            ","\n          );\n          background-size: 100% 0em;\n          background-position-y: 100%;\n          background-repeat: no-repeat;\n          transition: background-size 0.2s ease-in-out;\n          :hover,\n          :active,\n          :focus {\n            background-size: 100% 25%;\n          }\n        "],["\n          background-image: linear-gradient(\n            ",",\n            ","\n          );\n          background-size: 100% 0em;\n          background-position-y: 100%;\n          background-repeat: no-repeat;\n          transition: background-size 0.2s ease-in-out;\n          :hover,\n          :active,\n          :focus {\n            background-size: 100% 25%;\n          }\n        "])),t(o[s].shades[500],.7),t(o[s].shades[500],.7)))},o),Pn=r.span(C||(C=l(["\n  display: flex;\n  align-items: baseline;\n  gap: 0.25ch;\n\n  & svg,\n  & span {\n    height: 0.8em !important;\n    width: 0.8em !important;\n  }\n"],["\n  display: flex;\n  align-items: baseline;\n  gap: 0.25ch;\n\n  & svg,\n  & span {\n    height: 0.8em !important;\n    width: 0.8em !important;\n  }\n"]))),Bn=r.button(V||(V=l(["\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  user-select: none;\n  white-space: nowrap;\n  text-decoration: none;\n  text-align: center;\n  vertical-align: middle;\n  transition: all 200ms linear;\n  ","\n  ","\n"],["\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  user-select: none;\n  white-space: nowrap;\n  text-decoration: none;\n  text-align: center;\n  vertical-align: middle;\n  transition: all 200ms linear;\n  ","\n  ","\n"])),function(n){var t=n.girth,r=n.disabled,o=n.isStretched,i=n.variant,a=n.icon,d=n.isUppercase;return e(A||(A=l(["\n    font-size: ",";\n    padding: 0.2em 0.3em;\n    border-radius: 0.3em;\n    line-height: 1.5em;\n    ","\n    ","\n    ","\n    ","\n    ","\n    ","\n    ","\n    ","\n    ","\n  "],["\n    font-size: ",";\n    padding: 0.2em 0.3em;\n    border-radius: 0.3em;\n    line-height: 1.5em;\n    ","\n    ","\n    ","\n    ","\n    ","\n    ","\n    ","\n    ","\n    ","\n  "])),wn[t].fontSize,r&&e(N||(N=l(["\n      cursor: not-allowed;\n      opacity: 0.6;\n      transition: none;\n    "],["\n      cursor: not-allowed;\n      opacity: 0.6;\n      transition: none;\n    "]))),o&&e(G||(G=l(["\n      width: 100%;\n      text-align: center;\n      justify-content: center;\n    "],["\n      width: 100%;\n      text-align: center;\n      justify-content: center;\n    "]))),d&&e(U||(U=l(["\n      text-transform: uppercase;\n    "],["\n      text-transform: uppercase;\n    "]))),"simple"===i&&!a&&kn,"primary"===i&&!a&&On,"outlined"===i&&!a&&zn,"hero"===i&&!a&&jn,a&&En,Sn)},o),Ln=r.div(X||(X=l(["\n  display: flex;\n  ","\n  ","\n"],["\n  display: flex;\n  ","\n  ","\n"])),function(n){var t=n.isVertical,r=n.isStretched,o=n.isUnified;return e(W||(W=l(["\n    ","\n    ","\n    & * {\n      box-shadow: none !important;\n    }\n    & > :not(:first-child):not(:last-child) {\n      border-radius: 0 !important;\n    }\n  "],["\n    ","\n    ","\n    & * {\n      box-shadow: none !important;\n    }\n    & > :not(:first-child):not(:last-child) {\n      border-radius: 0 !important;\n    }\n  "])),t?e(q||(q=l(["\n          flex-direction: column;\n          & > :first-child {\n            border-bottom-left-radius: 0 !important;\n            border-bottom-right-radius: 0 !important;\n            ","\n          }\n          & > :last-child {\n            border-top-left-radius: 0 !important;\n            border-top-right-radius: 0 !important;\n            ","\n          }\n          & > :not(:first-child):not(:last-child) {\n            ","\n          }\n        "],["\n          flex-direction: column;\n          & > :first-child {\n            border-bottom-left-radius: 0 !important;\n            border-bottom-right-radius: 0 !important;\n            ","\n          }\n          & > :last-child {\n            border-top-left-radius: 0 !important;\n            border-top-right-radius: 0 !important;\n            ","\n          }\n          & > :not(:first-child):not(:last-child) {\n            ","\n          }\n        "])),o&&e(F||(F=l(["\n              border-bottom: 0 !important;\n            "],["\n              border-bottom: 0 !important;\n            "]))),o&&e(M||(M=l(["\n              border-top: 0 !important;\n            "],["\n              border-top: 0 !important;\n            "]))),o&&e(_||(_=l(["\n              border-top: 0 !important;\n              border-bottom: 0 !important;\n            "],["\n              border-top: 0 !important;\n              border-bottom: 0 !important;\n            "])))):e(Q||(Q=l(["\n          & > :first-child {\n            border-top-right-radius: 0 !important;\n            border-bottom-right-radius: 0 !important;\n            ","\n          }\n          & > :last-child {\n            border-top-left-radius: 0 !important;\n            border-bottom-left-radius: 0 !important;\n            ","\n          }\n          & > :not(:first-child):not(:last-child) {\n            ","\n          }\n        "],["\n          & > :first-child {\n            border-top-right-radius: 0 !important;\n            border-bottom-right-radius: 0 !important;\n            ","\n          }\n          & > :last-child {\n            border-top-left-radius: 0 !important;\n            border-bottom-left-radius: 0 !important;\n            ","\n          }\n          & > :not(:first-child):not(:last-child) {\n            ","\n          }\n        "])),o&&e(H||(H=l(["\n              border-right: 0 !important;\n            "],["\n              border-right: 0 !important;\n            "]))),o&&e(J||(J=l(["\n              border-left: 0 !important;\n            "],["\n              border-left: 0 !important;\n            "]))),o&&e(K||(K=l(["\n              border-right: 0 !important;\n              border-left: 0 !important;\n            "],["\n              border-right: 0 !important;\n              border-left: 0 !important;\n            "])))),r&&e(T||(T=l(["\n      width: 100% !important;\n      & * {\n        flex-grow: 1 !important;\n        flex-shrink: 1 !important;\n        flex-basis: 1% !important;\n      }\n    "],["\n      width: 100% !important;\n      & * {\n        flex-grow: 1 !important;\n        flex-shrink: 1 !important;\n        flex-basis: 1% !important;\n      }\n    "]))))},o),Dn=r.div($||($=l(["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  & * {\n    box-shadow: none !important;\n    &:hover {\n      box-shadow: none !important;\n    }\n  }\n  ","\n  ","\n"],["\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  & * {\n    box-shadow: none !important;\n    &:hover {\n      box-shadow: none !important;\n    }\n  }\n  ","\n  ","\n"])),function(n){var t=n.isStretched;return e(Z||(Z=l(["\n    ","\n  "],["\n    ","\n  "])),t&&e(Y||(Y=l(["\n      width: 100% !important;\n      & * {\n        flex-grow: 1 !important;\n        flex-shrink: 1 !important;\n        flex-basis: 1% !important;\n      }\n    "],["\n      width: 100% !important;\n      & * {\n        flex-grow: 1 !important;\n        flex-shrink: 1 !important;\n        flex-basis: 1% !important;\n      }\n    "]))))},o),Rn=r.button(an||(an=l(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  ","\n  ","\n"],["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  ","\n  ","\n"])),function(n){var t=n.girth,r=n.disabled,o=n.isIconOnly,i=n.variant,a=n.placement;return e(on||(on=l(["\n    font-size: ",";\n    ","\n    ","\n    ","\n    ","\n    ","\n  "],["\n    font-size: ",";\n    ","\n    ","\n    ","\n    ","\n    ","\n  "])),wn[t].fontSize,e(o?nn||(nn=l(["\n          padding: 0.3em;\n          border-radius: 50%;\n        "],["\n          padding: 0.3em;\n          border-radius: 50%;\n        "])):en||(en=l(["\n          padding: 0.2rem;\n          border-radius: 0.4em;\n        "],["\n          padding: 0.2rem;\n          border-radius: 0.4em;\n        "]))),r&&e(tn||(tn=l(["\n      cursor: not-allowed;\n      opacity: 0.5;\n    "],["\n      cursor: not-allowed;\n      opacity: 0.5;\n    "]))),"right"==a&&e(rn||(rn=l(["\n      flex-direction: row-reverse;\n    "],["\n      flex-direction: row-reverse;\n    "]))),"primary"===i&&On,"outlined"===i&&zn)},o),Cn=r.span(dn||(dn=l(["\n  padding: 0.2em;\n"],["\n  padding: 0.2em;\n"]))),Nn=r.span(pn||(pn=l(["\n  ","\n"],["\n  ","\n"])),function(n){var t=n.isIconOnly;return e(cn||(cn=l(["\n    ","\n  "],["\n    ","\n  "])),e(t?ln||(ln=l(["\n          padding: 0.2em;\n        "],["\n          padding: 0.2em;\n        "])):sn||(sn=l(["\n          padding: 0.4em 0.6em;\n        "],["\n          padding: 0.4em 0.6em;\n        "]))))}),Gn=r.span(fn||(fn=l(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  ","\n"],["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  ","\n"])),function(n){var t=n.isIconOnly;return e(hn||(hn=l(["\n    ","\n  "],["\n    ","\n  "])),e(t?mn||(mn=l(["\n          height: 1.4em;\n          width: 1.4em;\n        "],["\n          height: 1.4em;\n          width: 1.4em;\n        "])):un||(un=l(["\n          height: 1.2em;\n          width: 1.2em;\n        "],["\n          height: 1.2em;\n          width: 1.2em;\n        "]))))}),Un=r.span(yn||(yn=l(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  user-select: none;\n  ","\n"],["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  vertical-align: middle;\n  white-space: nowrap;\n  user-select: none;\n  ","\n"])),function(n){var t=n.placement;return e(xn||(xn=l(["\n    ","\n  "],["\n    ","\n  "])),e("right"==t?bn||(bn=l(["\n          padding-left: 0.4em;\n        "],["\n          padding-left: 0.4em;\n        "])):gn||(gn=l(["\n          padding-right: 0.4em;\n        "],["\n          padding-right: 0.4em;\n        "]))))}),An=r(i.RotatingCircle)(vn||(vn=l(["\n  height: 1.5em;\n  width: 1.5em;\n  margin: 0 0.25em 0 0;\n"],["\n  height: 1.5em;\n  width: 1.5em;\n  margin: 0 0.25em 0 0;\n"]))),Vn=n.forwardRef(function(e,t){var r=e.children,o=e.canLaunch,l=e.disabled,s=d(e,["children","canLaunch","disabled"]);return o?n.createElement(In,a({"data-tui-name":"Anchor",ref:t},s,{target:"_blank",disabled:l}),n.createElement(Pn,null,r,n.createElement(i,{ele:n.createElement(i.Launch,null)}))):n.createElement(In,a({ref:t,disabled:l},s),r)});Vn.defaultProps={canLaunch:!1,disabled:!1,girth:"md",tone:"neutral"},Vn.displayName="Anchor";var Fn=n.forwardRef(function(e,t){var r=e.children,o=e.isLoading,i=e.disabled,l=e.icon,s=d(e,["children","isLoading","disabled","icon"]),c=n.useMemo(function(){return[o,i].some(Boolean)},[o,i]);return n.createElement(Bn,a({type:"button","data-tui-name":"Button",ref:t,disabled:c,"aria-disabled":c,"aria-busy":o,icon:l},s),l?n.createElement(Gn,{isIconOnly:!0},l):n.createElement(n.Fragment,null,o&&n.createElement(An,{"aria-label":"Loading"}),r))});Fn.defaultProps={girth:"md",isGradient:!1,isLoading:!1,isStretched:!1,isUppercase:!1,tone:"neutral",variant:"outlined"},Fn.displayName="Button";var Mn=n.forwardRef(function(e,t){var r=e.children,o=e.disabled,i=d(e,["children","disabled"]);return n.createElement(Dn,a({"data-tui-name":"ButtonCluster",ref:t},i),n.Children.map(r,function(e){return n.cloneElement(e,{disabled:o})}))});Mn.defaultProps={disabled:!1,isStretched:!1},Mn.displayName="ButtonCluster";var _n=n.forwardRef(function(e,t){var r=e.children,o=e.disabled,i=d(e,["children","disabled"]);return n.createElement(Ln,a({"data-tui-name":"ButtonGroup",ref:t},i),n.Children.map(r,function(e){return n.cloneElement(e,{disabled:o})}))});_n.defaultProps={isStretched:!1,isUnified:!1,isVertical:!1},_n.displayName="ButtonGroup";var qn=n.forwardRef(function(e,t){var r=e.children,o=e.icon,i=d(e,["children","icon"]);return n.createElement(Rn,a({"data-tui-name":"IconButton",ref:t},i),r?n.createElement(Cn,null,n.createElement(Gn,{isIconOnly:i.isIconOnly},o)):n.createElement(Nn,{isIconOnly:i.isIconOnly},n.createElement(Gn,{isIconOnly:i.isIconOnly},o)),r&&n.createElement(Un,{placement:i.placement},r))});qn.defaultProps={girth:"md",isIconOnly:!1,placement:"left",tone:"neutral",variant:"outlined"},qn.displayName="IconButton";export{Vn as Anchor,Fn as Button,Mn as ButtonCluster,_n as ButtonGroup,qn as IconButton};