@idui/react-toggle-controls/dist/index.js

React Toggle Controls

!function(n,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("react"),require("styled-components"),require("styled-tools"));else if("function"==typeof define&&define.amd)define(["react","styled-components","styled-tools"],e);else{var o="object"==typeof exports?e(require("react"),require("styled-components"),require("styled-tools")):e(n.react,n["styled-components"],n["styled-tools"]);for(var r in o)("object"==typeof exports?exports:n)[r]=o[r]}}(self,(function(n,e,o){return function(){"use strict";var r={865:function(n,e,o){o.r(e),o.d(e,{Checkbox:function(){return H},CheckboxThemedElements:function(){return m},Radio:function(){return gn},RadioThemedElements:function(){return $},Switch:function(){return an},SwitchThemedElements:function(){return q},ToggleState:function(){return l}});var r,t,i,l,c=o(297),a=o.n(c),s=function(){},d=o(914),p=o.n(d),u=p().input(r||(t=["\n  visibility: hidden;\n  position: absolute;\n"],i=["\n  visibility: hidden;\n  position: absolute;\n"],Object.defineProperty?Object.defineProperty(t,"raw",{value:i}):t.raw=i,r=t)),b=function(){return(b=Object.assign||function(n){for(var e,o=1,r=arguments.length;o<r;o++)for(var t in e=arguments[o])Object.prototype.hasOwnProperty.call(e,t)&&(n[t]=e[t]);return n}).apply(this,arguments)},f=function(n){var e=n.onChange,o=void 0===e?s:e,r=n.type,t=void 0===r?"checkbox":r,i=function(n,e){var o={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&e.indexOf(r)<0&&(o[r]=n[r]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(r=Object.getOwnPropertySymbols(n);t<r.length;t++)e.indexOf(r[t])<0&&Object.prototype.propertyIsEnumerable.call(n,r[t])&&(o[r[t]]=n[r[t]])}return o}(n,["onChange","type"]);return a().createElement(u,b({onChange:function(n){o(n.currentTarget.checked)},type:t},i))};!function(n){n.on="on",n.off="off",n.disabled="disabled"}(l||(l={}));var h,g,y,m,v,x,O,w,j,k=o(849),z=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},C=p().div(h||(h=z(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ",";\n  width: ",";\n  min-width: ",";\n  height: ",";\n  min-height: ",";\n  border-width: 2px;\n  border-style: solid;\n  border-radius: 5px;\n  transition: all 0.3s ease-in-out;\n  user-select: none;\n"],["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: ",";\n  width: ",";\n  min-width: ",";\n  height: ",";\n  min-height: ",";\n  border-width: 2px;\n  border-style: solid;\n  border-radius: 5px;\n  transition: all 0.3s ease-in-out;\n  user-select: none;\n"])),(0,k.ifProp)("disabled","default","pointer"),(0,k.prop)("size"),(0,k.prop)("size"),(0,k.prop)("size"),(0,k.prop)("size")),E=p().label(g||(g=z(["\n  display: inline-flex;\n  line-height: ",";\n  color: inherit;\n  "," {\n    border-color: ",";\n    background-color: ",";\n    color: ",";\n  }\n  &:hover {\n    "," {\n      border-color: ",";\n      background-color: ",";\n      color: ",";\n    }\n  }\n"],["\n  display: inline-flex;\n  line-height: ",";\n  color: inherit;\n  "," {\n    border-color: ",";\n    background-color: ",";\n    color: ",";\n  }\n  &:hover {\n    "," {\n      border-color: ",";\n      background-color: ",";\n      color: ",";\n    }\n  }\n"])),(0,k.prop)("size"),C,(0,k.prop)("colors.border"),(0,k.prop)("colors.background"),(0,k.prop)("colors.icon"),C,(0,k.prop)("colors.hover.border",(0,k.prop)("colors.border")),(0,k.prop)("colors.hover.background",(0,k.prop)("colors.background")),(0,k.prop)("colors.hover.icon",(0,k.prop)("colors.icon"))),P=p().span(y||(y=z(["\n  margin-left: 10px;\n"],["\n  margin-left: 10px;\n"])));!function(n){n.background="background",n.border="border",n.icon="icon"}(m||(m={}));var F,S,D,B,N,T,q,I,M,_,L,R=((v={})[l.on]=((x={})[m.background]="#580B9E",x[m.border]="#580B9E",x[m.icon]="#FFFFFF",x),v[l.off]=((O={})[m.background]="transparent",O[m.border]="#CCCCCC",O[m.icon]="transparent",O.hover=((w={})[m.border]="#580B9E",w),O),v[l.disabled]=((j={})[m.background]="#F5F5F5",j[m.border]="#D9D9D9",j[m.icon]="#D9D9D9",j),v),A=function(){return a().createElement("svg",{width:"10px",height:"10px",viewBox:"0 0 405 405",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a().createElement("path",{d:"M393.401,124.425L179.603,338.208c-15.832,15.835-41.514,15.835-57.361,0L11.878,227.836\n\t\tc-15.838-15.835-15.838-41.52,0-57.358c15.841-15.841,41.521-15.841,57.355-0.006l81.698,81.699L336.037,67.064\n\t\tc15.841-15.841,41.523-15.829,57.358,0C409.23,82.902,409.23,108.578,393.401,124.425z",fill:"currentColor"}))},G=function(){return(G=Object.assign||function(n){for(var e,o=1,r=arguments.length;o<r;o++)for(var t in e=arguments[o])Object.prototype.hasOwnProperty.call(e,t)&&(n[t]=e[t]);return n}).apply(this,arguments)},H=function(n){var e=n.checked,o=n.className,r=n.label,t=n.disabled,i=n.icon,c=void 0===i?a().createElement(A,null):i,s=n.colors,d=void 0===s?R:s,p=n.size,u=void 0===p?"20px":p,b=function(n,e){var o={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&e.indexOf(r)<0&&(o[r]=n[r]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(r=Object.getOwnPropertySymbols(n);t<r.length;t++)e.indexOf(r[t])<0&&Object.prototype.propertyIsEnumerable.call(n,r[t])&&(o[r[t]]=n[r[t]])}return o}(n,["checked","className","label","disabled","icon","colors","size"]),h=d[t?l.disabled:e?l.on:l.off];return a().createElement(E,{className:o,size:u,colors:h},a().createElement(f,G({checked:e,disabled:t},b)),a().createElement(C,{size:u,disabled:t},c),r&&a().createElement(P,null,r))},J=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},K=p().div(D||(D=J(["\n  position: absolute;\n  top: 50%;\n  transition: all 0.3s ease-in-out;\n  ",";\n\n  width: ",";\n  height: ",";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n  background-color: ",";\n  color: ",";\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    border-radius: 50%;\n    background-color: inherit;\n    opacity: 0.2;\n    transition: transform 0.3s ease;\n  }\n"],["\n  position: absolute;\n  top: 50%;\n  transition: all 0.3s ease-in-out;\n  ",";\n\n  width: ",";\n  height: ",";\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);\n  background-color: ",";\n  color: ",";\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    border-radius: 50%;\n    background-color: inherit;\n    opacity: 0.2;\n    transition: transform 0.3s ease;\n  }\n"])),(0,k.ifProp)("isOn",(0,d.css)(F||(F=J(["\n      left: 100%;\n      transform: translate(-100%, -50%);\n    "],["\n      left: 100%;\n      transform: translate(-100%, -50%);\n    "]))),(0,d.css)(S||(S=J(["\n      left: 0;\n      transform: translate(0, -50%);\n    "],["\n      left: 0;\n      transform: translate(0, -50%);\n    "])))),(0,k.prop)("size"),(0,k.prop)("size"),(0,k.prop)("color"),(0,k.prop)("iconColor")),Q=p().div(B||(B=J(["\n  position: relative;\n  display: inline-block;\n  cursor: ",";\n\n  width: ",";\n  min-width: ",";\n  height: ",";\n  border-radius: 10px;\n  background-color: ",";\n\n  &:hover {\n    "," {\n      &:before {\n        transform: scale(1.5);\n      }\n    }\n  }\n"],["\n  position: relative;\n  display: inline-block;\n  cursor: ",";\n\n  width: ",";\n  min-width: ",";\n  height: ",";\n  border-radius: 10px;\n  background-color: ",";\n\n  &:hover {\n    "," {\n      &:before {\n        transform: scale(1.5);\n      }\n    }\n  }\n"])),(0,k.ifProp)("disabled","default","pointer"),(0,k.prop)("size.0"),(0,k.prop)("size.0"),(0,k.prop)("size.1"),(0,k.prop)("color"),K),U=p().label(N||(N=J(["\n  display: inline-flex;\n  line-height: ",";\n"],["\n  display: inline-flex;\n  line-height: ",";\n"])),(0,k.prop)("size")),V=p().div(T||(T=J(["\n  margin-left: 10px;\n"],["\n  margin-left: 10px;\n"])));!function(n){n.handle="handle",n.toggle="toggle",n.icon="icon"}(q||(q={}));var W,X,Y,Z,$,nn,en,on,rn,tn,ln=((I={})[l.on]=((M={})[q.toggle]="#580B9E",M[q.handle]="#580B9E",M[q.icon]="#FFFFFF",M),I[l.off]=((_={})[q.toggle]="#FFFFFF",_[q.handle]="#CCCCCC",_[q.icon]="#CCCCCC",_),I[l.disabled]=((L={})[q.toggle]="#F5F5F5",L[q.handle]="#D9D9D9",L[q.icon]="#D9D9D9",L),I),cn=function(){return(cn=Object.assign||function(n){for(var e,o=1,r=arguments.length;o<r;o++)for(var t in e=arguments[o])Object.prototype.hasOwnProperty.call(e,t)&&(n[t]=e[t]);return n}).apply(this,arguments)},an=function(n){var e=n.checked,o=n.onChange,r=n.className,t=n.label,i=n.disabled,c=n.colors,s=void 0===c?ln:c,d=n.icons,p=n.toggleSize,u=void 0===p?"22px":p,b=n.handleSize,h=void 0===b?["36px","16px"]:b,g=function(n,e){var o={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&e.indexOf(r)<0&&(o[r]=n[r]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(r=Object.getOwnPropertySymbols(n);t<r.length;t++)e.indexOf(r[t])<0&&Object.prototype.propertyIsEnumerable.call(n,r[t])&&(o[r[t]]=n[r[t]])}return o}(n,["checked","onChange","className","label","disabled","colors","icons","toggleSize","handleSize"]),y=s[i?l.disabled:e?l.on:l.off];return a().createElement(U,{className:r,size:h[1]},a().createElement(f,cn({onChange:o,checked:e,disabled:i},g)),a().createElement(Q,{color:y[q.handle],disabled:i,size:h},a().createElement(K,{isOn:e,color:y[q.toggle],iconColor:y[q.icon],size:u},d&&d[e?l.on:l.off])),t&&a().createElement(V,null,t))},sn=function(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n},dn=p().div(W||(W=sn(["\n  width: ",";\n  height: ",";\n  border-radius: inherit;\n  transition: background-color 0.3s ease-in-out;\n"],["\n  width: ",";\n  height: ",";\n  border-radius: inherit;\n  transition: background-color 0.3s ease-in-out;\n"])),(0,k.prop)("size"),(0,k.prop)("size")),pn=p().div(X||(X=sn(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.3s ease-in-out;\n  border-width: 2px;\n  border-style: solid;\n  cursor: ",";\n  width: ",";\n  min-width: ",";\n  height: ",";\n  min-height: ",";\n  border-radius: 50%;\n"],["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition: border-color 0.3s ease-in-out;\n  border-width: 2px;\n  border-style: solid;\n  cursor: ",";\n  width: ",";\n  min-width: ",";\n  height: ",";\n  min-height: ",";\n  border-radius: 50%;\n"])),(0,k.ifProp)("disabled","default","pointer"),(0,k.prop)("size"),(0,k.prop)("size"),(0,k.prop)("size"),(0,k.prop)("size")),un=p().label(Y||(Y=sn(["\n  display: inline-flex;\n  line-height: ",";\n  "," {\n    border-color: ",";\n  }\n  "," {\n    background-color: ",";\n  }\n  &:hover {\n    "," {\n      border-color: ",";\n    }\n    "," {\n      background-color: ",";\n    }\n  }\n"],["\n  display: inline-flex;\n  line-height: ",";\n  "," {\n    border-color: ",";\n  }\n  "," {\n    background-color: ",";\n  }\n  &:hover {\n    "," {\n      border-color: ",";\n    }\n    "," {\n      background-color: ",";\n    }\n  }\n"])),(0,k.prop)("size"),pn,(0,k.prop)("colors.border"),dn,(0,k.prop)("colors.toggle"),pn,(0,k.prop)("colors.hover.border",(0,k.prop)("colors.border")),dn,(0,k.prop)("colors.hover.toggle",(0,k.prop)("colors.toggle"))),bn=p().div(Z||(Z=sn(["\n  margin-left: 10px;\n"],["\n  margin-left: 10px;\n"])));!function(n){n.border="border",n.toggle="toggle"}($||($={}));var fn=((nn={})[l.on]=((en={})[$.border]="#580B9E",en[$.toggle]="#580B9E",en),nn[l.off]=((on={})[$.border]="#CCCCCC",on[$.toggle]="transparent",on.hover=((rn={})[$.border]="#580B9E",rn),on),nn[l.disabled]=((tn={})[$.border]="#D9D9D9",tn[$.toggle]="#D9D9D9",tn),nn),hn=function(){return(hn=Object.assign||function(n){for(var e,o=1,r=arguments.length;o<r;o++)for(var t in e=arguments[o])Object.prototype.hasOwnProperty.call(e,t)&&(n[t]=e[t]);return n}).apply(this,arguments)},gn=function(n){var e=n.checked,o=n.className,r=n.label,t=n.disabled,i=n.toggleSize,c=void 0===i?"12px":i,s=n.handleSize,d=void 0===s?"20px":s,p=n.colors,u=void 0===p?fn:p,b=n.type,h=void 0===b?"radio":b,g=function(n,e){var o={};for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&e.indexOf(r)<0&&(o[r]=n[r]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var t=0;for(r=Object.getOwnPropertySymbols(n);t<r.length;t++)e.indexOf(r[t])<0&&Object.prototype.propertyIsEnumerable.call(n,r[t])&&(o[r[t]]=n[r[t]])}return o}(n,["checked","className","label","disabled","toggleSize","handleSize","colors","type"]),y=u[t?l.disabled:e?l.on:l.off];return a().createElement(un,{colors:y,size:d},a().createElement(f,hn({checked:e,disabled:t,type:h},g)),a().createElement(pn,{className:o,size:d,disabled:t},a().createElement(dn,{size:c})),r&&a().createElement(bn,null,r))}},297:function(e){e.exports=n},914:function(n){n.exports=e},849:function(n){n.exports=o}},t={};function i(n){if(t[n])return t[n].exports;var e=t[n]={exports:{}};return r[n](e,e.exports,i),e.exports}return i.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return i.d(e,{a:e}),e},i.d=function(n,e){for(var o in e)i.o(e,o)&&!i.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:e[o]})},i.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},i.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},i(865)}()}));