@tidy-ui/button
Version:
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
2 lines (1 loc) • 19.3 kB
JavaScript
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react"),e=require("@tidy-ui/commons");function t(n){return n&&n.__esModule?n:{default:n}}var r=/*#__PURE__*/t(n),o=function(){return o=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},o.apply(this,arguments)};function i(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 a(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}var d,s,l,c,p,m,u,f,h,b,g,x,y,v,w,k,O,S,z,j,E,I,B,P,L,D,C,R,G,N,_,U,A,M,q,V,F,H,J,K,Q,T,W,X,Y,Z,$,nn,en,tn,rn,on,an,dn,sn,ln,cn,pn,mn,un,fn,hn,bn,gn,xn,yn={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"}},vn=e.css(l||(l=a(["\n ","\n"],["\n ","\n"])),function(n){var t=n.theme,r=t.palette,o=t.isDark,i=n.tone,l=n.disabled;return e.css(s||(s=a(["\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],!l&&e.css(d||(d=a(["\n &:hover {\n background-color: ",";\n }\n "],["\n &:hover {\n background-color: ",";\n }\n "])),o?r[i][900]:r[i][200]))}),wn=e.css(u||(u=a(["\n ","\n"],["\n ","\n"])),function(n){var t=n.theme,r=t.palette,o=t.isDark,i=n.tone,d=n.disabled;return e.css(m||(m=a(["\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 "])),r[i][50],r[i][700],e.hsla(r[i].shades[900],.4),!o&&e.css(c||(c=a(["\n box-shadow: 0px 1px 0px ",";\n "],["\n box-shadow: 0px 1px 0px ",";\n "])),r[i][100]),!d&&e.css(p||(p=a(["\n &:hover {\n background-color: ",";\n }\n "],["\n &:hover {\n background-color: ",";\n }\n "])),r[i][800]))}),kn=e.css(b||(b=a(["\n ","\n"],["\n ","\n"])),function(n){var t=n.theme,r=t.palette,o=t.isDark,i=n.tone,d=n.disabled;return e.css(h||(h=a(["\n color: ",";\n border: 1px solid ",";\n ","\n "],["\n color: ",";\n border: 1px solid ",";\n ","\n "])),o?r[i][100]:r[i][900],o?r[i][700]:r[i][400],!d&&e.css(f||(f=a(["\n &:hover {\n background-color: ",";\n border: 1px solid ",";\n }\n "],["\n &:hover {\n background-color: ",";\n border: 1px solid ",";\n }\n "])),o?e.hsla(r[i].shades[800],.2):r[i][100],o?r[i][400]:r[i][900]))}),On=e.css(O||(O=a(["\n ","\n"],["\n ","\n"])),function(n){var t=n.theme,r=t.palette,o=t.isDark,i=n.tone,d=n.disabled,s=n.isGradient;return e.css(k||(k=a(["\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],!d&&e.css(y||(y=a(["\n ","\n "],["\n ","\n "])),o?e.css(g||(g=a(["\n box-shadow: 0 0 24px ",";\n "],["\n box-shadow: 0 0 24px ",";\n "])),r[i][800]):e.css(x||(x=a(["\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])),s?e.css(v||(v=a(["\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.css(w||(w=a(["\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]))}),Sn=e.css(z||(z=a(["\n ","\n"],["\n ","\n"])),function(n){var t=n.theme,r=t.palette,o=t.isDark,i=n.tone;return e.css(S||(S=a(["\n color: ",";\n "],["\n color: ",";\n "])),o?r[i][400]:r[i][800])}),zn=e.css(E||(E=a(["\n ","\n"],["\n ","\n"])),function(n){var t=n.theme,r=t.palette,o=t.isDark,i=n.tone;return e.css(j||(j=a(["\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])}),jn=e.styled.a(L||(L=a(["\n ","\n ","\n"],["\n ","\n ","\n"])),function(n){var t=n.theme,r=t.palette,o=t.isDark,i=n.disabled,d=n.girth,s=n.tone;return e.css(P||(P=a(["\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 "])),yn[d].fontSize,o?r[s][400]:r[s][600],i?e.css(I||(I=a(["\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.css(B||(B=a(["\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 "])),e.hsla(r[s].shades[500],.7),e.hsla(r[s].shades[500],.7)))},e.applyStandardOverrideStyles),En=e.styled.span(D||(D=a(["\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"]))),In=e.styled.button(_||(_=a(["\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,d=n.icon,s=n.isUppercase;return e.css(N||(N=a(["\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 "])),yn[t].fontSize,r&&e.css(C||(C=a(["\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.css(R||(R=a(["\n width: 100%;\n text-align: center;\n justify-content: center;\n "],["\n width: 100%;\n text-align: center;\n justify-content: center;\n "]))),s&&e.css(G||(G=a(["\n text-transform: uppercase;\n "],["\n text-transform: uppercase;\n "]))),"simple"===i&&!d&&vn,"primary"===i&&!d&&wn,"outlined"===i&&!d&&kn,"hero"===i&&!d&&On,d&&Sn,zn)},e.applyStandardOverrideStyles),Bn=e.styled.div(T||(T=a(["\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.css(Q||(Q=a(["\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.css(q||(q=a(["\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.css(U||(U=a(["\n border-bottom: 0 !important;\n "],["\n border-bottom: 0 !important;\n "]))),o&&e.css(A||(A=a(["\n border-top: 0 !important;\n "],["\n border-top: 0 !important;\n "]))),o&&e.css(M||(M=a(["\n border-top: 0 !important;\n border-bottom: 0 !important;\n "],["\n border-top: 0 !important;\n border-bottom: 0 !important;\n "])))):e.css(J||(J=a(["\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.css(V||(V=a(["\n border-right: 0 !important;\n "],["\n border-right: 0 !important;\n "]))),o&&e.css(F||(F=a(["\n border-left: 0 !important;\n "],["\n border-left: 0 !important;\n "]))),o&&e.css(H||(H=a(["\n border-right: 0 !important;\n border-left: 0 !important;\n "],["\n border-right: 0 !important;\n border-left: 0 !important;\n "])))),r&&e.css(K||(K=a(["\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 "]))))},e.applyStandardOverrideStyles),Pn=e.styled.div(Y||(Y=a(["\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.css(X||(X=a(["\n ","\n "],["\n ","\n "])),t&&e.css(W||(W=a(["\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 "]))))},e.applyStandardOverrideStyles),Ln=e.styled.button(rn||(rn=a(["\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,d=n.placement;return e.css(tn||(tn=a(["\n font-size: ",";\n ","\n ","\n ","\n ","\n ","\n "],["\n font-size: ",";\n ","\n ","\n ","\n ","\n ","\n "])),yn[t].fontSize,e.css(o?Z||(Z=a(["\n padding: 0.3em;\n border-radius: 50%;\n "],["\n padding: 0.3em;\n border-radius: 50%;\n "])):$||($=a(["\n padding: 0.2rem;\n border-radius: 0.4em;\n "],["\n padding: 0.2rem;\n border-radius: 0.4em;\n "]))),r&&e.css(nn||(nn=a(["\n cursor: not-allowed;\n opacity: 0.5;\n "],["\n cursor: not-allowed;\n opacity: 0.5;\n "]))),"right"==d&&e.css(en||(en=a(["\n flex-direction: row-reverse;\n "],["\n flex-direction: row-reverse;\n "]))),"primary"===i&&wn,"outlined"===i&&kn)},e.applyStandardOverrideStyles),Dn=e.styled.span(on||(on=a(["\n padding: 0.2em;\n"],["\n padding: 0.2em;\n"]))),Cn=e.styled.span(ln||(ln=a(["\n ","\n"],["\n ","\n"])),function(n){var t=n.isIconOnly;return e.css(sn||(sn=a(["\n ","\n "],["\n ","\n "])),e.css(t?an||(an=a(["\n padding: 0.2em;\n "],["\n padding: 0.2em;\n "])):dn||(dn=a(["\n padding: 0.4em 0.6em;\n "],["\n padding: 0.4em 0.6em;\n "]))))}),Rn=e.styled.span(un||(un=a(["\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.css(mn||(mn=a(["\n ","\n "],["\n ","\n "])),e.css(t?cn||(cn=a(["\n height: 1.4em;\n width: 1.4em;\n "],["\n height: 1.4em;\n width: 1.4em;\n "])):pn||(pn=a(["\n height: 1.2em;\n width: 1.2em;\n "],["\n height: 1.2em;\n width: 1.2em;\n "]))))}),Gn=e.styled.span(gn||(gn=a(["\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.css(bn||(bn=a(["\n ","\n "],["\n ","\n "])),e.css("right"==t?fn||(fn=a(["\n padding-left: 0.4em;\n "],["\n padding-left: 0.4em;\n "])):hn||(hn=a(["\n padding-right: 0.4em;\n "],["\n padding-right: 0.4em;\n "]))))}),Nn=e.styled(e.Icon.RotatingCircle)(xn||(xn=a(["\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"]))),_n=r.default.forwardRef(function(n,t){var a=n.children,d=n.canLaunch,s=n.disabled,l=i(n,["children","canLaunch","disabled"]);return d?r.default.createElement(jn,o({"data-tui-name":"Anchor",ref:t},l,{target:"_blank",disabled:s}),r.default.createElement(En,null,a,r.default.createElement(e.Icon,{ele:r.default.createElement(e.Icon.Launch,null)}))):r.default.createElement(jn,o({ref:t,disabled:s},l),a)});_n.defaultProps={canLaunch:!1,disabled:!1,girth:"md",tone:"neutral"},_n.displayName="Anchor";var Un=r.default.forwardRef(function(n,e){var t=n.children,a=n.isLoading,d=n.disabled,s=n.icon,l=i(n,["children","isLoading","disabled","icon"]),c=r.default.useMemo(function(){return[a,d].some(Boolean)},[a,d]);return r.default.createElement(In,o({type:"button","data-tui-name":"Button",ref:e,disabled:c,"aria-disabled":c,"aria-busy":a,icon:s},l),s?r.default.createElement(Rn,{isIconOnly:!0},s):r.default.createElement(r.default.Fragment,null,a&&r.default.createElement(Nn,{"aria-label":"Loading"}),t))});Un.defaultProps={girth:"md",isGradient:!1,isLoading:!1,isStretched:!1,isUppercase:!1,tone:"neutral",variant:"outlined"},Un.displayName="Button";var An=r.default.forwardRef(function(n,e){var t=n.children,a=n.disabled,d=i(n,["children","disabled"]);return r.default.createElement(Pn,o({"data-tui-name":"ButtonCluster",ref:e},d),r.default.Children.map(t,function(n){return r.default.cloneElement(n,{disabled:a})}))});An.defaultProps={disabled:!1,isStretched:!1},An.displayName="ButtonCluster";var Mn=r.default.forwardRef(function(n,e){var t=n.children,a=n.disabled,d=i(n,["children","disabled"]);return r.default.createElement(Bn,o({"data-tui-name":"ButtonGroup",ref:e},d),r.default.Children.map(t,function(n){return r.default.cloneElement(n,{disabled:a})}))});Mn.defaultProps={isStretched:!1,isUnified:!1,isVertical:!1},Mn.displayName="ButtonGroup";var qn=r.default.forwardRef(function(n,e){var t=n.children,a=n.icon,d=i(n,["children","icon"]);return r.default.createElement(Ln,o({"data-tui-name":"IconButton",ref:e},d),t?r.default.createElement(Dn,null,r.default.createElement(Rn,{isIconOnly:d.isIconOnly},a)):r.default.createElement(Cn,{isIconOnly:d.isIconOnly},r.default.createElement(Rn,{isIconOnly:d.isIconOnly},a)),t&&r.default.createElement(Gn,{placement:d.placement},t))});qn.defaultProps={girth:"md",isIconOnly:!1,placement:"left",tone:"neutral",variant:"outlined"},qn.displayName="IconButton",exports.Anchor=_n,exports.Button=Un,exports.ButtonCluster=An,exports.ButtonGroup=Mn,exports.IconButton=qn;