react-win7-button/build/index.esm.js

A Windows 7 styled React button component with spinner and variants.

import n,{useState as e,useRef as o,useEffect as t}from"react";import r,{keyframes as i,css as a}from"styled-components";var d=function(){return d=Object.assign||function(n){for(var e,o=1,t=arguments.length;o<t;o++)for(var r in e=arguments[o])Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},d.apply(this,arguments)};function f(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}"function"==typeof SuppressedError&&SuppressedError;var s,c,l,p,b,u,x,g,h,m,w=r.div(s||(s=f(["\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: ",";\n  border-radius: ",";\n"],["\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: ",";\n  border-radius: ",";\n"])),function(n){var e;return null!==(e=n.bg)&&void 0!==e?e:"rgba(255, 255, 255, 0.5)"},function(n){var e;return null!==(e=n.radius)&&void 0!==e?e:"inherit"}),y=i(c||(c=f(["\n  from { box-shadow: inset 0 0 3px 1px #34deffdd; }\n  to { box-shadow: inset 0 0 1px 1px #34deffdd; }\n"],["\n  from { box-shadow: inset 0 0 3px 1px #34deffdd; }\n  to { box-shadow: inset 0 0 1px 1px #34deffdd; }\n"]))),v=i(l||(l=f(["\n  0% { box-shadow: 0 0 0 2px #34deff66; }\n  50% { box-shadow: 0 0 0 6px #34deff33; }\n  100% { box-shadow: 0 0 0 2px #34deff66; }\n"],["\n  0% { box-shadow: 0 0 0 2px #34deff66; }\n  50% { box-shadow: 0 0 0 6px #34deff33; }\n  100% { box-shadow: 0 0 0 2px #34deff66; }\n"]))),k=r.button(h||(h=f(['\n  font: 9pt "Segoe UI", "SegoeUI", "Noto Sans", sans-serif;\n  box-sizing: border-box;\n  border: 1px solid #8e8f8f;\n  border-radius: ',";\n  box-shadow: inset 0 0 0 1px #fffc;\n  color: ",";\n  min-width: ",";\n  min-height: 23px;\n  width: ",";\n  height: ",";\n  padding: ",";\n  background: ",";\n  position: relative;\n  z-index: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ",";\n  cursor: pointer;\n  transition: border-color 0.2s, background 0.2s, transform 0.1s, box-shadow 0.1s;\n  font-size: ",';\n\n  &::before,\n  &::after {\n    content: "";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    opacity: 0;\n    transition: opacity 0.3s;\n    z-index: -1;\n  }\n\n  &::before {\n    box-shadow: inset 0 0 0 1px #fffc;\n    background: linear-gradient(#eaf6fd 45%, #bee6fd 45%, #a7d9f5);\n  }\n\n  &::after {\n    box-shadow: inset 1px 1px 0 #0003, inset -1px 1px 0 #0001;\n    background: linear-gradient(#e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db);\n  }\n\n  &:disabled {\n    background: #f4f4f4;\n    border-color: #adb2b5;\n    color: #838383;\n    cursor: not-allowed;\n  }\n\n  &:not(:disabled) {\n    &:hover {\n      border-color: #3c7fb1;\n      &::before {\n        opacity: 1;\n      }\n    }\n\n    &:active,\n    &.active {\n      border-color: #6d91ab;\n      &::after {\n        opacity: 1;\n      }\n      transform: translateY(1px);\n      box-shadow: inset 2px 2px 5px #0003, inset -2px -2px 5px #fff3;\n    }\n  }\n\n  &:focus-visible,\n  &.focused {\n    box-shadow: inset 0 0 0 2px #98d1ef;\n    outline: 1px dotted #000;\n    outline-offset: -4px;\n    animation: 1s ease infinite alternate ',";\n  }\n\n  ","\n\n  ","\n\n  ","\n\n  ","\n\n  ","\n"],['\n  font: 9pt "Segoe UI", "SegoeUI", "Noto Sans", sans-serif;\n  box-sizing: border-box;\n  border: 1px solid #8e8f8f;\n  border-radius: ',";\n  box-shadow: inset 0 0 0 1px #fffc;\n  color: ",";\n  min-width: ",";\n  min-height: 23px;\n  width: ",";\n  height: ",";\n  padding: ",";\n  background: ",";\n  position: relative;\n  z-index: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: ",";\n  cursor: pointer;\n  transition: border-color 0.2s, background 0.2s, transform 0.1s, box-shadow 0.1s;\n  font-size: ",';\n\n  &::before,\n  &::after {\n    content: "";\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    opacity: 0;\n    transition: opacity 0.3s;\n    z-index: -1;\n  }\n\n  &::before {\n    box-shadow: inset 0 0 0 1px #fffc;\n    background: linear-gradient(#eaf6fd 45%, #bee6fd 45%, #a7d9f5);\n  }\n\n  &::after {\n    box-shadow: inset 1px 1px 0 #0003, inset -1px 1px 0 #0001;\n    background: linear-gradient(#e5f4fc, #c4e5f6 30% 50%, #98d1ef 50%, #68b3db);\n  }\n\n  &:disabled {\n    background: #f4f4f4;\n    border-color: #adb2b5;\n    color: #838383;\n    cursor: not-allowed;\n  }\n\n  &:not(:disabled) {\n    &:hover {\n      border-color: #3c7fb1;\n      &::before {\n        opacity: 1;\n      }\n    }\n\n    &:active,\n    &.active {\n      border-color: #6d91ab;\n      &::after {\n        opacity: 1;\n      }\n      transform: translateY(1px);\n      box-shadow: inset 2px 2px 5px #0003, inset -2px -2px 5px #fff3;\n    }\n  }\n\n  &:focus-visible,\n  &.focused {\n    box-shadow: inset 0 0 0 2px #98d1ef;\n    outline: 1px dotted #000;\n    outline-offset: -4px;\n    animation: 1s ease infinite alternate ',";\n  }\n\n  ","\n\n  ","\n\n  ","\n\n  ","\n\n  ","\n"])),function(n){return"pill"===n.shape?"999px":"square"===n.shape?"0":"3px"},function(n){return n.color||"#222"},function(n){return n.iconOnly?"23px":"75px"},function(n){return n.fullWidth?"100%":n.width||"auto"},function(n){return n.height||"auto"},function(n){return n.iconOnly?"0":"small"===n.size?"0 8px":"large"===n.size?"0 16px":"0 12px"},function(n){return n.background||"linear-gradient(#f2f2f2 45%, #ebebeb 45%, #cfcfcf)"},function(n){return n.iconOnly?"0":"6px"},function(n){return"small"===n.size?"8pt":"large"===n.size?"11pt":"9pt"},y,function(n){return n.focused&&a(p||(p=f(["\n      box-shadow: inset 0 0 0 2px #98d1ef;\n      outline: 1px dotted #000;\n      outline-offset: -4px;\n      animation: 1s ease infinite alternate ",";\n      background: linear-gradient(#f5fbff 45%, #dcefff 45%, #c0e4fb);\n    "],["\n      box-shadow: inset 0 0 0 2px #98d1ef;\n      outline: 1px dotted #000;\n      outline-offset: -4px;\n      animation: 1s ease infinite alternate ",";\n      background: linear-gradient(#f5fbff 45%, #dcefff 45%, #c0e4fb);\n    "])),y)},function(n){return n.iconOnly&&a(b||(b=f(["\n      min-width: 23px;\n      width: 23px;\n      padding: 0;\n      justify-content: center;\n      svg {\n        width: 14px;\n        height: 14px;\n      }\n    "],["\n      min-width: 23px;\n      width: 23px;\n      padding: 0;\n      justify-content: center;\n      svg {\n        width: 14px;\n        height: 14px;\n      }\n    "])))},function(n){return"primary"===n.variant&&a(u||(u=f(["\n      border-color: #3c7fb1;\n      background: linear-gradient(#eaf6fd 45%, #bee6fd 45%, #a7d9f5);\n    "],["\n      border-color: #3c7fb1;\n      background: linear-gradient(#eaf6fd 45%, #bee6fd 45%, #a7d9f5);\n    "])))},function(n){return"danger"===n.variant&&a(x||(x=f(["\n      border-color: #b13c3c;\n      background: linear-gradient(#fdeaea 45%, #fdbebe 45%, #f5a7a7);\n      color: #5a0000;\n    "],["\n      border-color: #b13c3c;\n      background: linear-gradient(#fdeaea 45%, #fdbebe 45%, #f5a7a7);\n      color: #5a0000;\n    "])))},function(n){return n.isActive&&a(g||(g=f(["\n      animation: "," 1s infinite;\n      border-color: #34deff;\n    "],["\n      animation: "," 1s infinite;\n      border-color: #34deff;\n    "])),v)}),O=r.div(m||(m=f(["\n  border: 2px solid ",";\n  border-top: 2px solid ",";\n  border-radius: 50%;\n  width: ","px;\n  height: ","px;\n  animation: spin 0.8s linear infinite;\n\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n"],["\n  border: 2px solid ",";\n  border-top: 2px solid ",";\n  border-radius: 50%;\n  width: ","px;\n  height: ","px;\n  animation: spin 0.8s linear infinite;\n\n  @keyframes spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n"])),function(n){var e=n.color;return e?"".concat(e,"33"):"#ccc"},function(n){return n.color||"#333"},function(n){return n.size||12},function(n){return n.size||12}),z=function(r){var i=r.children,a=r.startIcon,f=r.endIcon,s=r.iconOnly,c=r.loading,l=r.spinnerPosition,p=void 0===l?"start":l,b=r.size,u=void 0===b?"medium":b,x=r.active,g=r.toggle,h=r.autoFocus,m=r.focused,y=r.onActiveChange,v=function(n,e){var o={};for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&e.indexOf(t)<0&&(o[t]=n[t]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(t=Object.getOwnPropertySymbols(n);r<t.length;r++)e.indexOf(t[r])<0&&Object.prototype.propertyIsEnumerable.call(n,t[r])&&(o[t[r]]=n[t[r]])}return o}(r,["children","startIcon","endIcon","iconOnly","loading","spinnerPosition","size","active","toggle","autoFocus","focused","onActiveChange"]),z=e(!1),j=z[0],S=z[1],I=o(null);t(function(){h&&I.current&&(I.current.focus(),g&&S(!0))},[h,g]);var E=void 0!==x?x:j,P=n.createElement(O,{size:"large"===u?16:12,color:v.color});return n.createElement(k,d({ref:I,iconOnly:s,disabled:v.disabled||c,size:u,isActive:E,focused:m,onClick:function(n){var e;g&&(void 0===x?(S(!j),null==y||y(!j)):null==y||y(!x)),null===(e=v.onClick)||void 0===e||e.call(v,n)}},v),c&&"start"===p&&P,a&&!s&&n.createElement("span",null,a),!s&&i,f&&!s&&n.createElement("span",null,f),s&&a,c&&"end"===p&&P,c&&"overlay"===p&&n.createElement(w,null,P))};export{w as SpinnerOverlay,z as default};