react-switch-selector - npm Package Compare versions

Comparing version 2.2.1 to 2.3.0

dist/defaultColors.d.ts

 export declare const defaultColors: {
-    backgroundColor: string;
-    selectedBackgroundColor: string;
-    fontColor: string;
-    selectedFontColor: string;
+    readonly backgroundColor: "#ecf0f1";
+    readonly selectedBackgroundColor: "#2ecc71";
+    readonly fontColor: "#000";
+    readonly selectedFontColor: "#fff";
 };

dist/index.d.ts

 import SwitchSelector from "./SwitchSelector";
 export default SwitchSelector;

dist/index.modern.js

@@ -1,2 +0,2 @@
-import e,{createElement as o,useState as t,useEffect as r}from"react";import{setup as n,styled as i}from"goober";import{shouldForwardProp as l}from"goober/should-forward-prop";function d(){return(d=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}let a,s,c,p,u=e=>e;const b=["fontSize","fontColor","selectedFontColor","optionsAmount","optionBorderRadius","isRawText","selectedIndex","border","backgroundColor","selectedBackgroundColor","wrapperBorderRadius","selectionIndicatorMargin","disabled"];n(o,void 0,void 0,l(e=>!b.includes(e)));const g=i("div")(a||(a=u`
+import e,{createElement as o,useState as t,useEffect as r,useCallback as n,useMemo as i}from"react";import{setup as l,styled as d}from"goober";import{shouldForwardProp as a}from"goober/should-forward-prop";function s(){return(s=Object.assign||function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e}).apply(this,arguments)}let c,p,u,b,g=e=>e;const f=["fontSize","fontColor","selectedFontColor","optionsAmount","optionBorderRadius","isRawText","selectedIndex","border","backgroundColor","selectedBackgroundColor","wrapperBorderRadius","selectionIndicatorMargin","disabled"];l(o,void 0,void 0,a(e=>!f.includes(e)));const h=d("div")(c||(c=g`
     display: flex;
@@ -22,6 +22,7 @@ border-radius: ${0};
         border-radius: ${0};
-        border: ${0}px solid
-            ${0};
+        border: ${0}px ${0}${0};
         background: ${0};
-        transition: left 0.1s linear, background 0.1s linear;
+        transition:
+            left 0.1s linear,
+            background 0.1s linear;
         transform: translateY(-50%);
@@ -31,3 +32,3 @@ z-index: 1;
     }
-`),({wrapperBorderRadius:e})=>"number"==typeof e?`${e}px`:e,e=>e.border,e=>e.backgroundColor,e=>e.disabled?.7:1,e=>e.selectedIndex/e.optionsAmount*100,e=>2*e.selectionIndicatorMargin,e=>1/e.optionsAmount*100," - ",e=>2*e.selectionIndicatorMargin,({optionBorderRadius:e})=>"number"==typeof e?`${e}px`:e,e=>e.selectionIndicatorMargin,e=>e.backgroundColor,e=>e.selectedBackgroundColor),f=i("div")(s||(s=u`
+`),({wrapperBorderRadius:e})=>"number"==typeof e?`${e}px`:e,e=>e.border,e=>e.backgroundColor,e=>e.disabled?.7:1,e=>e.selectedIndex/e.optionsAmount*100,e=>2*e.selectionIndicatorMargin,e=>1/e.optionsAmount*100," - ",e=>2*e.selectionIndicatorMargin,({optionBorderRadius:e})=>"number"==typeof e?`${e}px`:e,e=>e.selectionIndicatorMargin,"solid ",e=>e.backgroundColor,e=>e.selectedBackgroundColor),C=d("div")(p||(p=g`
     display: flex;
@@ -38,3 +39,3 @@ align-items: center;
     border-radius: ${0};
-`),e=>1/e.optionsAmount*100,({optionBorderRadius:e})=>"number"==typeof e?`${e}px`:e),h=i("label")(c||(c=u`
+`),e=>1/e.optionsAmount*100,({optionBorderRadius:e})=>"number"==typeof e?`${e}px`:e),m=d("label")(u||(u=g`
     display: flex;
@@ -50,3 +51,3 @@ justify-content: center;
     color: ${0};
-`),e=>e.disabled?"not-allowed":"pointer",e=>e.isRawText?e.fontSize+"px":"unset",e=>e.isRawText?e.selected?e.selectedFontColor:e.fontColor:"unset"),C=i("input")(p||(p=u`
+`),e=>e.disabled?"not-allowed":"pointer",e=>e.isRawText?e.fontSize+"px":"unset",e=>e.isRawText?e.selected?e.selectedFontColor:e.fontColor:"unset"),x=d("input")(b||(b=g`
     width: 0;
@@ -58,3 +59,3 @@ height: 0;
     pointer-events: none;
-`)),m={backgroundColor:"#ecf0f1",selectedBackgroundColor:"#2ecc71",fontColor:"#000",selectedFontColor:"#fff"};export default o=>{var n;const{onChange:i=(()=>{}),options:l=[],initialSelectedIndex:a=0}=o,s=!!l[a],[c,p]=t(s?a:0),{border:u=0,backgroundColor:b=m.backgroundColor,selectedBackgroundColor:x=m.selectedBackgroundColor,wrapperBorderRadius:w=20,optionBorderRadius:$=18,fontSize:k=14,fontColor:B=m.fontColor,selectedFontColor:y=m.selectedFontColor,selectionIndicatorMargin:v=2,forcedSelectedIndex:R,disabled:I=!1,name:z}=o;return r(()=>{void 0!==R&&l[R]&&R!==c&&p(R)},[R,l,c]),l.length?e.createElement(g,{selectedIndex:c,optionsAmount:l.length,className:"react-switch-selector-wrapper "+(I?"react-switch-selector-disabled":""),border:u,backgroundColor:b,selectedBackgroundColor:(null==(n=l[c])?void 0:n.selectedBackgroundColor)||x,wrapperBorderRadius:w,optionBorderRadius:$,selectionIndicatorMargin:v,disabled:I,role:"radiogroup","aria-labelledby":z},l.map((o,t)=>{const r=c===t,n=`${null!=z?z:"rss"}-option-${t}`,a="string"==typeof o.label;return e.createElement(f,{key:n,optionsAmount:l.length,className:"react-switch-selector-option react-switch-selector-option-"+(r?"selected":"unselected"),optionBorderRadius:$},e.createElement(h,d({className:"react-switch-selector-option-label",selected:r,isRawText:a,disabled:I,"aria-disabled":I,htmlFor:n},a?{fontSize:k,fontColor:o.fontColor||B,selectedFontColor:o.selectedFontColor||y}:{}),e.createElement(C,{type:"radio",id:n,name:z,onChange:()=>(e=>{I||e===c||(p(e),i(l[e].value))})(t),checked:r,"aria-checked":r,tabIndex:r?0:-1}),o.label))})):null};
+`)),$={backgroundColor:"#ecf0f1",selectedBackgroundColor:"#2ecc71",fontColor:"#000",selectedFontColor:"#fff"};export default o=>{var l;const{onChange:d=(()=>{}),options:a=[],initialSelectedIndex:c=0}=o,p=!!a[c],[u,b]=t(p?c:0),{border:g=0,backgroundColor:f=$.backgroundColor,selectedBackgroundColor:w=$.selectedBackgroundColor,wrapperBorderRadius:k=20,optionBorderRadius:B=18,fontSize:y=14,fontColor:v=$.fontColor,selectedFontColor:R=$.selectedFontColor,selectionIndicatorMargin:I=2,forcedSelectedIndex:z,disabled:F=!1,name:A}=o;r(()=>{void 0!==z&&a[z]&&z!==u&&b(z)},[z,a,u]);const M=n(e=>{F||e===u||(b(e),d(a[e].value))},[F,d,a,u]),S=i(()=>a.map((o,t)=>{const r=u===t,n=`${null!=A?A:"rss"}-option-${t}`,i="string"==typeof o.label;return e.createElement(C,{key:n,optionsAmount:a.length,className:"react-switch-selector-option react-switch-selector-option-"+(r?"selected":"unselected"),optionBorderRadius:B},e.createElement(m,s({className:"react-switch-selector-option-label",selected:r,isRawText:i,disabled:F,"aria-disabled":F,htmlFor:n},i?{fontSize:y,fontColor:o.fontColor||v,selectedFontColor:o.selectedFontColor||R}:{}),e.createElement(x,{type:"radio",id:n,name:A,onChange:()=>M(t),checked:r,"aria-checked":r,tabIndex:r?0:-1}),o.label))}),[F,v,y,M,A,B,a,R,u]);return a.length?e.createElement(h,{selectedIndex:u,optionsAmount:a.length,className:"react-switch-selector-wrapper "+(F?"react-switch-selector-disabled":""),border:g,backgroundColor:f,selectedBackgroundColor:(null==(l=a[u])?void 0:l.selectedBackgroundColor)||w,wrapperBorderRadius:k,optionBorderRadius:B,selectionIndicatorMargin:I,disabled:F,role:"radiogroup","aria-labelledby":A},S):null};
 //# sourceMappingURL=index.modern.js.map

dist/index.module.js

@@ -1,2 +0,2 @@
-import n,{createElement as e,useState as o,useEffect as r}from"react";import{setup as t,styled as i}from"goober";import{shouldForwardProp as d}from"goober/should-forward-prop";function a(){return(a=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(n[r]=o[r])}return n}).apply(this,arguments)}function c(n,e){return e||(e=n.slice(0)),n.raw=e,n}var l,s,u,p,f=["fontSize","fontColor","selectedFontColor","optionsAmount","optionBorderRadius","isRawText","selectedIndex","border","backgroundColor","selectedBackgroundColor","wrapperBorderRadius","selectionIndicatorMargin","disabled"];t(e,void 0,void 0,d(function(n){return!f.includes(n)}));var b=i("div")(l||(l=c(["\n    display: flex;\n    border-radius: ",";\n    border: ",";\n    background: ",";\n    width: 100%;\n    height: 100%;\n    position: relative;\n    opacity: ",";\n    overflow: hidden;\n\n    &::before {\n        top: 50%;\n        left: ",'%;\n        content: "";\n        position: absolute;\n        height: calc(100% - ',"px);\n        width: calc(\n            ","%","","px\n        );\n        border-radius: ",";\n        border: ","px solid\n            ",";\n        background: ",";\n        transition: left 0.1s linear, background 0.1s linear;\n        transform: translateY(-50%);\n        z-index: 1;\n        box-sizing: content-box;\n    }\n"])),function(n){var e=n.wrapperBorderRadius;return"number"==typeof e?e+"px":e},function(n){return n.border},function(n){return n.backgroundColor},function(n){return n.disabled?.7:1},function(n){return n.selectedIndex/n.optionsAmount*100},function(n){return 2*n.selectionIndicatorMargin},function(n){return 1/n.optionsAmount*100}," - ",function(n){return 2*n.selectionIndicatorMargin},function(n){var e=n.optionBorderRadius;return"number"==typeof e?e+"px":e},function(n){return n.selectionIndicatorMargin},function(n){return n.backgroundColor},function(n){return n.selectedBackgroundColor}),g=i("div")(s||(s=c(["\n    display: flex;\n    align-items: center;\n    height: 100%;\n    width: ","%;\n    border-radius: ",";\n"])),function(n){return 1/n.optionsAmount*100},function(n){var e=n.optionBorderRadius;return"number"==typeof e?e+"px":e}),h=i("label")(u||(u=c(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    z-index: 2;\n    transition: color 0.1s linear;\n    cursor: ",";\n    font-size: ",";\n    color: ",";\n"])),function(n){return n.disabled?"not-allowed":"pointer"},function(n){return n.isRawText?n.fontSize+"px":"unset"},function(n){return n.isRawText?n.selected?n.selectedFontColor:n.fontColor:"unset"}),v=i("input")(p||(p=c(["\n    width: 0;\n    height: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n    pointer-events: none;\n"])));export default function(e){var t,i=e.onChange,d=void 0===i?function(){}:i,c=e.options,l=void 0===c?[]:c,s=e.initialSelectedIndex,u=void 0===s?0:s,p=o(l[u]?u:0),f=p[0],m=p[1],x=e.border,w=void 0===x?0:x,C=e.backgroundColor,k=void 0===C?"#ecf0f1":C,y=e.selectedBackgroundColor,B=void 0===y?"#2ecc71":y,R=e.wrapperBorderRadius,I=void 0===R?20:R,z=e.optionBorderRadius,A=void 0===z?18:z,F=e.fontSize,M=void 0===F?14:F,S=e.fontColor,E=void 0===S?"#000":S,T=e.selectedFontColor,j=void 0===T?"#fff":T,N=e.selectionIndicatorMargin,O=void 0===N?2:N,P=e.forcedSelectedIndex,Y=e.disabled,q=void 0!==Y&&Y,D=e.name;return r(function(){void 0!==P&&l[P]&&P!==f&&m(P)},[P,l,f]),l.length?n.createElement(b,{selectedIndex:f,optionsAmount:l.length,className:"react-switch-selector-wrapper "+(q?"react-switch-selector-disabled":""),border:w,backgroundColor:k,selectedBackgroundColor:(null==(t=l[f])?void 0:t.selectedBackgroundColor)||B,wrapperBorderRadius:I,optionBorderRadius:A,selectionIndicatorMargin:O,disabled:q,role:"radiogroup","aria-labelledby":D},l.map(function(e,o){var r=f===o,t=(null!=D?D:"rss")+"-option-"+o,i="string"==typeof e.label;return n.createElement(g,{key:t,optionsAmount:l.length,className:"react-switch-selector-option react-switch-selector-option-"+(r?"selected":"unselected"),optionBorderRadius:A},n.createElement(h,a({className:"react-switch-selector-option-label",selected:r,isRawText:i,disabled:q,"aria-disabled":q,htmlFor:t},i?{fontSize:M,fontColor:e.fontColor||E,selectedFontColor:e.selectedFontColor||j}:{}),n.createElement(v,{type:"radio",id:t,name:D,onChange:function(){return function(n){q||n===f||(m(n),d(l[n].value))}(o)},checked:r,"aria-checked":r,tabIndex:r?0:-1}),e.label))})):null}
+import n,{createElement as e,useState as o,useEffect as r,useCallback as t,useMemo as i}from"react";import{setup as d,styled as a}from"goober";import{shouldForwardProp as c}from"goober/should-forward-prop";function l(){return(l=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var o=arguments[e];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(n[r]=o[r])}return n}).apply(this,arguments)}function s(n,e){return e||(e=n.slice(0)),n.raw=e,n}var u,f,p,b,g=["fontSize","fontColor","selectedFontColor","optionsAmount","optionBorderRadius","isRawText","selectedIndex","border","backgroundColor","selectedBackgroundColor","wrapperBorderRadius","selectionIndicatorMargin","disabled"];d(e,void 0,void 0,c(function(n){return!g.includes(n)}));var v=a("div")(u||(u=s(["\n    display: flex;\n    border-radius: ",";\n    border: ",";\n    background: ",";\n    width: 100%;\n    height: 100%;\n    position: relative;\n    opacity: ",";\n    overflow: hidden;\n\n    &::before {\n        top: 50%;\n        left: ",'%;\n        content: "";\n        position: absolute;\n        height: calc(100% - ',"px);\n        width: calc(\n            ","%","","px\n        );\n        border-radius: ",";\n        border: ","px ","",";\n        background: ",";\n        transition:\n            left 0.1s linear,\n            background 0.1s linear;\n        transform: translateY(-50%);\n        z-index: 1;\n        box-sizing: content-box;\n    }\n"])),function(n){var e=n.wrapperBorderRadius;return"number"==typeof e?e+"px":e},function(n){return n.border},function(n){return n.backgroundColor},function(n){return n.disabled?.7:1},function(n){return n.selectedIndex/n.optionsAmount*100},function(n){return 2*n.selectionIndicatorMargin},function(n){return 1/n.optionsAmount*100}," - ",function(n){return 2*n.selectionIndicatorMargin},function(n){var e=n.optionBorderRadius;return"number"==typeof e?e+"px":e},function(n){return n.selectionIndicatorMargin},"solid ",function(n){return n.backgroundColor},function(n){return n.selectedBackgroundColor}),h=a("div")(f||(f=s(["\n    display: flex;\n    align-items: center;\n    height: 100%;\n    width: ","%;\n    border-radius: ",";\n"])),function(n){return 1/n.optionsAmount*100},function(n){var e=n.optionBorderRadius;return"number"==typeof e?e+"px":e}),m=a("label")(p||(p=s(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    z-index: 2;\n    transition: color 0.1s linear;\n    cursor: ",";\n    font-size: ",";\n    color: ",";\n"])),function(n){return n.disabled?"not-allowed":"pointer"},function(n){return n.isRawText?n.fontSize+"px":"unset"},function(n){return n.isRawText?n.selected?n.selectedFontColor:n.fontColor:"unset"}),x=a("input")(b||(b=s(["\n    width: 0;\n    height: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n    pointer-events: none;\n"])));export default function(e){var d,a=e.onChange,c=void 0===a?function(){}:a,s=e.options,u=void 0===s?[]:s,f=e.initialSelectedIndex,p=void 0===f?0:f,b=o(u[p]?p:0),g=b[0],w=b[1],C=e.border,k=void 0===C?0:C,y=e.backgroundColor,B=void 0===y?"#ecf0f1":y,R=e.selectedBackgroundColor,I=void 0===R?"#2ecc71":R,z=e.wrapperBorderRadius,A=void 0===z?20:z,F=e.optionBorderRadius,M=void 0===F?18:F,S=e.fontSize,E=void 0===S?14:S,T=e.fontColor,j=void 0===T?"#000":T,N=e.selectedFontColor,O=void 0===N?"#fff":N,P=e.selectionIndicatorMargin,Y=void 0===P?2:P,q=e.forcedSelectedIndex,D=e.disabled,G=void 0!==D&&D,H=e.name;r(function(){void 0!==q&&u[q]&&q!==g&&w(q)},[q,u,g]);var J=t(function(n){G||n===g||(w(n),c(u[n].value))},[G,c,u,g]),K=i(function(){return u.map(function(e,o){var r=g===o,t=(null!=H?H:"rss")+"-option-"+o,i="string"==typeof e.label;return n.createElement(h,{key:t,optionsAmount:u.length,className:"react-switch-selector-option react-switch-selector-option-"+(r?"selected":"unselected"),optionBorderRadius:M},n.createElement(m,l({className:"react-switch-selector-option-label",selected:r,isRawText:i,disabled:G,"aria-disabled":G,htmlFor:t},i?{fontSize:E,fontColor:e.fontColor||j,selectedFontColor:e.selectedFontColor||O}:{}),n.createElement(x,{type:"radio",id:t,name:H,onChange:function(){return J(o)},checked:r,"aria-checked":r,tabIndex:r?0:-1}),e.label))})},[G,j,E,J,H,M,u,O,g]);return u.length?n.createElement(v,{selectedIndex:g,optionsAmount:u.length,className:"react-switch-selector-wrapper "+(G?"react-switch-selector-disabled":""),border:k,backgroundColor:B,selectedBackgroundColor:(null==(d=u[g])?void 0:d.selectedBackgroundColor)||I,wrapperBorderRadius:A,optionBorderRadius:M,selectionIndicatorMargin:Y,disabled:G,role:"radiogroup","aria-labelledby":H},K):null}
 //# sourceMappingURL=index.module.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("react"),require("goober"),require("goober/should-forward-prop")):"function"==typeof define&&define.amd?define(["react","goober","goober/should-forward-prop"],n):(e||self).reactSwitchSelector=n(e.react,e.goober,e.shouldForwardProp)}(this,function(e,n,o){function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r,i,d,a,l=/*#__PURE__*/t(e);function u(){return(u=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var o=arguments[n];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(e[t]=o[t])}return e}).apply(this,arguments)}function c(e,n){return n||(n=e.slice(0)),e.raw=n,e}var s=["fontSize","fontColor","selectedFontColor","optionsAmount","optionBorderRadius","isRawText","selectedIndex","border","backgroundColor","selectedBackgroundColor","wrapperBorderRadius","selectionIndicatorMargin","disabled"];n.setup(e.createElement,void 0,void 0,o.shouldForwardProp(function(e){return!s.includes(e)}));var f=n.styled("div")(r||(r=c(["\n    display: flex;\n    border-radius: ",";\n    border: ",";\n    background: ",";\n    width: 100%;\n    height: 100%;\n    position: relative;\n    opacity: ",";\n    overflow: hidden;\n\n    &::before {\n        top: 50%;\n        left: ",'%;\n        content: "";\n        position: absolute;\n        height: calc(100% - ',"px);\n        width: calc(\n            ","%","","px\n        );\n        border-radius: ",";\n        border: ","px solid\n            ",";\n        background: ",";\n        transition: left 0.1s linear, background 0.1s linear;\n        transform: translateY(-50%);\n        z-index: 1;\n        box-sizing: content-box;\n    }\n"])),function(e){var n=e.wrapperBorderRadius;return"number"==typeof n?n+"px":n},function(e){return e.border},function(e){return e.backgroundColor},function(e){return e.disabled?.7:1},function(e){return e.selectedIndex/e.optionsAmount*100},function(e){return 2*e.selectionIndicatorMargin},function(e){return 1/e.optionsAmount*100}," - ",function(e){return 2*e.selectionIndicatorMargin},function(e){var n=e.optionBorderRadius;return"number"==typeof n?n+"px":n},function(e){return e.selectionIndicatorMargin},function(e){return e.backgroundColor},function(e){return e.selectedBackgroundColor}),p=n.styled("div")(i||(i=c(["\n    display: flex;\n    align-items: center;\n    height: 100%;\n    width: ","%;\n    border-radius: ",";\n"])),function(e){return 1/e.optionsAmount*100},function(e){var n=e.optionBorderRadius;return"number"==typeof n?n+"px":n}),b=n.styled("label")(d||(d=c(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    z-index: 2;\n    transition: color 0.1s linear;\n    cursor: ",";\n    font-size: ",";\n    color: ",";\n"])),function(e){return e.disabled?"not-allowed":"pointer"},function(e){return e.isRawText?e.fontSize+"px":"unset"},function(e){return e.isRawText?e.selected?e.selectedFontColor:e.fontColor:"unset"}),g=n.styled("input")(a||(a=c(["\n    width: 0;\n    height: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n    pointer-events: none;\n"]))),h="react-switch-selector";return function(n){var o,t=n.onChange,r=void 0===t?function(){}:t,i=n.options,d=void 0===i?[]:i,a=n.initialSelectedIndex,c=void 0===a?0:a,s=e.useState(d[c]?c:0),v=s[0],m=s[1],x=n.border,y=void 0===x?0:x,w=n.backgroundColor,C=void 0===w?"#ecf0f1":w,k=n.selectedBackgroundColor,B=void 0===k?"#2ecc71":k,R=n.wrapperBorderRadius,I=void 0===R?20:R,z=n.optionBorderRadius,S=void 0===z?18:z,F=n.fontSize,A=void 0===F?14:F,E=n.fontColor,M=void 0===E?"#000":E,T=n.selectedFontColor,j=void 0===T?"#fff":T,q=n.selectionIndicatorMargin,N=void 0===q?2:q,O=n.forcedSelectedIndex,P=n.disabled,Y=void 0!==P&&P,D=n.name;return e.useEffect(function(){void 0!==O&&d[O]&&O!==v&&m(O)},[O,d,v]),d.length?l.default.createElement(f,{selectedIndex:v,optionsAmount:d.length,className:h+"-wrapper "+(Y?h+"-disabled":""),border:y,backgroundColor:C,selectedBackgroundColor:(null==(o=d[v])?void 0:o.selectedBackgroundColor)||B,wrapperBorderRadius:I,optionBorderRadius:S,selectionIndicatorMargin:N,disabled:Y,role:"radiogroup","aria-labelledby":D},d.map(function(e,n){var o=v===n,t=(null!=D?D:"rss")+"-option-"+n,i="string"==typeof e.label;return l.default.createElement(p,{key:t,optionsAmount:d.length,className:h+"-option "+h+"-option-"+(o?"selected":"unselected"),optionBorderRadius:S},l.default.createElement(b,u({className:h+"-option-label",selected:o,isRawText:i,disabled:Y,"aria-disabled":Y,htmlFor:t},i?{fontSize:A,fontColor:e.fontColor||M,selectedFontColor:e.selectedFontColor||j}:{}),l.default.createElement(g,{type:"radio",id:t,name:D,onChange:function(){return function(e){Y||e===v||(m(e),r(d[e].value))}(n)},checked:o,"aria-checked":o,tabIndex:o?0:-1}),e.label))})):null}});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("react"),require("goober"),require("goober/should-forward-prop")):"function"==typeof define&&define.amd?define(["react","goober","goober/should-forward-prop"],n):(e||self).reactSwitchSelector=n(e.react,e.goober,e.shouldForwardProp)}(this,function(e,n,o){function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r,i,d,a,l=/*#__PURE__*/t(e);function u(){return(u=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var o=arguments[n];for(var t in o)Object.prototype.hasOwnProperty.call(o,t)&&(e[t]=o[t])}return e}).apply(this,arguments)}function c(e,n){return n||(n=e.slice(0)),e.raw=n,e}var s=["fontSize","fontColor","selectedFontColor","optionsAmount","optionBorderRadius","isRawText","selectedIndex","border","backgroundColor","selectedBackgroundColor","wrapperBorderRadius","selectionIndicatorMargin","disabled"];n.setup(e.createElement,void 0,void 0,o.shouldForwardProp(function(e){return!s.includes(e)}));var f=n.styled("div")(r||(r=c(["\n    display: flex;\n    border-radius: ",";\n    border: ",";\n    background: ",";\n    width: 100%;\n    height: 100%;\n    position: relative;\n    opacity: ",";\n    overflow: hidden;\n\n    &::before {\n        top: 50%;\n        left: ",'%;\n        content: "";\n        position: absolute;\n        height: calc(100% - ',"px);\n        width: calc(\n            ","%","","px\n        );\n        border-radius: ",";\n        border: ","px ","",";\n        background: ",";\n        transition:\n            left 0.1s linear,\n            background 0.1s linear;\n        transform: translateY(-50%);\n        z-index: 1;\n        box-sizing: content-box;\n    }\n"])),function(e){var n=e.wrapperBorderRadius;return"number"==typeof n?n+"px":n},function(e){return e.border},function(e){return e.backgroundColor},function(e){return e.disabled?.7:1},function(e){return e.selectedIndex/e.optionsAmount*100},function(e){return 2*e.selectionIndicatorMargin},function(e){return 1/e.optionsAmount*100}," - ",function(e){return 2*e.selectionIndicatorMargin},function(e){var n=e.optionBorderRadius;return"number"==typeof n?n+"px":n},function(e){return e.selectionIndicatorMargin},"solid ",function(e){return e.backgroundColor},function(e){return e.selectedBackgroundColor}),p=n.styled("div")(i||(i=c(["\n    display: flex;\n    align-items: center;\n    height: 100%;\n    width: ","%;\n    border-radius: ",";\n"])),function(e){return 1/e.optionsAmount*100},function(e){var n=e.optionBorderRadius;return"number"==typeof n?n+"px":n}),b=n.styled("label")(d||(d=c(["\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n    z-index: 2;\n    transition: color 0.1s linear;\n    cursor: ",";\n    font-size: ",";\n    color: ",";\n"])),function(e){return e.disabled?"not-allowed":"pointer"},function(e){return e.isRawText?e.fontSize+"px":"unset"},function(e){return e.isRawText?e.selected?e.selectedFontColor:e.fontColor:"unset"}),g=n.styled("input")(a||(a=c(["\n    width: 0;\n    height: 0;\n    opacity: 0;\n    z-index: -1;\n    position: absolute;\n    pointer-events: none;\n"]))),h="react-switch-selector";return function(n){var o,t=n.onChange,r=void 0===t?function(){}:t,i=n.options,d=void 0===i?[]:i,a=n.initialSelectedIndex,c=void 0===a?0:a,s=e.useState(d[c]?c:0),v=s[0],m=s[1],x=n.border,y=void 0===x?0:x,w=n.backgroundColor,C=void 0===w?"#ecf0f1":w,k=n.selectedBackgroundColor,B=void 0===k?"#2ecc71":k,R=n.wrapperBorderRadius,I=void 0===R?20:R,z=n.optionBorderRadius,S=void 0===z?18:z,F=n.fontSize,M=void 0===F?14:F,A=n.fontColor,E=void 0===A?"#000":A,T=n.selectedFontColor,j=void 0===T?"#fff":T,q=n.selectionIndicatorMargin,N=void 0===q?2:q,O=n.forcedSelectedIndex,P=n.disabled,Y=void 0!==P&&P,D=n.name;e.useEffect(function(){void 0!==O&&d[O]&&O!==v&&m(O)},[O,d,v]);var G=e.useCallback(function(e){Y||e===v||(m(e),r(d[e].value))},[Y,r,d,v]),H=e.useMemo(function(){return d.map(function(e,n){var o=v===n,t=(null!=D?D:"rss")+"-option-"+n,r="string"==typeof e.label;return l.default.createElement(p,{key:t,optionsAmount:d.length,className:h+"-option "+h+"-option-"+(o?"selected":"unselected"),optionBorderRadius:S},l.default.createElement(b,u({className:h+"-option-label",selected:o,isRawText:r,disabled:Y,"aria-disabled":Y,htmlFor:t},r?{fontSize:M,fontColor:e.fontColor||E,selectedFontColor:e.selectedFontColor||j}:{}),l.default.createElement(g,{type:"radio",id:t,name:D,onChange:function(){return G(n)},checked:o,"aria-checked":o,tabIndex:o?0:-1}),e.label))})},[Y,E,M,G,D,S,d,j,v]);return d.length?l.default.createElement(f,{selectedIndex:v,optionsAmount:d.length,className:h+"-wrapper "+(Y?h+"-disabled":""),border:y,backgroundColor:C,selectedBackgroundColor:(null==(o=d[v])?void 0:o.selectedBackgroundColor)||B,wrapperBorderRadius:I,optionBorderRadius:S,selectionIndicatorMargin:N,disabled:Y,role:"radiogroup","aria-labelledby":D},H):null}});
 //# sourceMappingURL=index.umd.js.map

dist/SwitchSelector.d.ts

@@ -0,0 +0,0 @@ import { FC } from "react";

dist/SwitchSelector.mocks.d.ts

 import { SwitchSelectorProps } from "./SwitchSelector.props";
 export declare const switchSelectorMocks: SwitchSelectorProps;

dist/SwitchSelector.props.d.ts

@@ -1,5 +0,5 @@
-import type { ReactElement } from "react";
-import { StylingPropsTypes } from "./SwitchSelector.styled";
-export declare type OptionType<T = unknown> = {
-    label: string | number | ReactElement | HTMLElement;
+import type { ReactNode } from "react";
+import type { StylingPropsTypes } from "./SwitchSelector.styled";
+export type OptionType<T = unknown> = {
+    label: ReactNode;
     value: T;
@@ -6,0 +6,0 @@ selectedBackgroundColor?: string;

dist/SwitchSelector.stories.d.ts

@@ -1,9 +0,66 @@
-import React from "react";
-import { ComponentMeta, Story } from "@storybook/react";
-declare const _default: ComponentMeta<React.FC<import("./SwitchSelector.props").SwitchSelectorProps>>;
+import { StoryFn, Meta } from "@storybook/react";
+import SwitchSelector from "./SwitchSelector";
+declare const _default: Meta<typeof SwitchSelector>;
 export default _default;
-export declare const TwoOptions: any;
-export declare const ThreeOptions: any;
-export declare const Disabled: any;
-export declare const OuterBorderRadius: Story;
-export declare const MultipleInstances: Story;
+export declare const TwoOptions: {
+    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./SwitchSelector.props").SwitchSelectorProps>;
+    args: {
+        options: import("./SwitchSelector.props").OptionType<unknown>[];
+        onChange?: <T>(selectedOptionValue: T | unknown) => void;
+        initialSelectedIndex?: number;
+        forcedSelectedIndex?: number;
+        disabled?: boolean;
+        name?: string;
+        border?: string | number | undefined;
+        backgroundColor?: string | undefined;
+        selectedBackgroundColor?: string | undefined;
+        wrapperBorderRadius?: number | import("csstype").Property.BorderRadius<string> | undefined;
+        optionBorderRadius?: number | import("csstype").Property.BorderRadius<string> | undefined;
+        fontSize?: number | undefined;
+        fontColor?: string | undefined;
+        selectedFontColor?: string | undefined;
+        selectionIndicatorMargin?: number | undefined;
+    };
+};
+export declare const ThreeOptions: {
+    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./SwitchSelector.props").SwitchSelectorProps>;
+    args: {
+        initialSelectedIndex: number;
+        options: Array<import("./SwitchSelector.props").OptionType>;
+        onChange?: <T>(selectedOptionValue: T | unknown) => void;
+        forcedSelectedIndex?: number;
+        disabled?: boolean;
+        name?: string;
+        border?: string | number | undefined;
+        backgroundColor?: string | undefined;
+        selectedBackgroundColor?: string | undefined;
+        wrapperBorderRadius?: number | import("csstype").Property.BorderRadius<string> | undefined;
+        optionBorderRadius?: number | import("csstype").Property.BorderRadius<string> | undefined;
+        fontSize?: number | undefined;
+        fontColor?: string | undefined;
+        selectedFontColor?: string | undefined;
+        selectionIndicatorMargin?: number | undefined;
+    };
+};
+export declare const Disabled: {
+    render: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./SwitchSelector.props").SwitchSelectorProps>;
+    args: {
+        disabled: boolean;
+        options: Array<import("./SwitchSelector.props").OptionType>;
+        onChange?: <T>(selectedOptionValue: T | unknown) => void;
+        initialSelectedIndex?: number;
+        forcedSelectedIndex?: number;
+        name?: string;
+        border?: string | number | undefined;
+        backgroundColor?: string | undefined;
+        selectedBackgroundColor?: string | undefined;
+        wrapperBorderRadius?: number | import("csstype").Property.BorderRadius<string> | undefined;
+        optionBorderRadius?: number | import("csstype").Property.BorderRadius<string> | undefined;
+        fontSize?: number | undefined;
+        fontColor?: string | undefined;
+        selectedFontColor?: string | undefined;
+        selectionIndicatorMargin?: number | undefined;
+    };
+};
+export declare const OuterBorderRadius: StoryFn;
+export declare const MultipleInstances: StoryFn;

dist/SwitchSelector.styled.d.ts

@@ -1,4 +0,3 @@
-/// <reference types="react" />
-import CSS from "csstype";
-export declare type StylingPropsTypes = {
+import type CSS from "csstype";
+export type StylingPropsTypes = {
     border: string | number;
@@ -5,0 +4,0 @@ backgroundColor: string;

package.json

 {
   "name": "react-switch-selector",
   "description": "Tiny switch/toggle component for React️ ⚛",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "license": "MIT",
   "repository": "https://github.com/GR34SE/react-switch-selector.git",
-  "author": "Adrian Celczyński <[e-mail]>",
+  "author": "https://github.com/GR34SE",
   "type": "module",
@@ -24,6 +24,7 @@ "source": "src/index.tsx",
     "lint:fix": "eslint './src/**/*.{ts,tsx}' --fix",
-    "storybook": "start-storybook"
+    "storybook:dev": "storybook dev",
+    "storybook:build": "storybook build"
   },
   "peerDependencies": {
-    "goober": "^2.1.1",
+    "goober": "^2.1.14",
     "react": "^16 || ^17 || ^18",
@@ -33,29 +34,30 @@ "react-dom": "^16 || ^17 || ^18"
   "dependencies": {
-    "goober": "2.1.8",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "goober": "2.1.14"
   },
   "devDependencies": {
-    "@babel/core": "7.17.5",
-    "@storybook/addon-actions": "6.4.19",
-    "@storybook/addon-essentials": "6.4.19",
-    "@storybook/addon-links": "6.4.19",
-    "@storybook/react": "6.4.19",
-    "@types/react": "17.0.39",
-    "@types/react-dom": "17.0.11",
-    "@typescript-eslint/eslint-plugin": "5.12.1",
-    "@typescript-eslint/parser": "5.12.1",
-    "babel-loader": "8.2.3",
-    "csstype": "3.0.10",
-    "eslint": "8.9.0",
-    "eslint-config-prettier": "8.4.0",
-    "eslint-plugin-import": "2.25.4",
-    "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "7.28.0",
-    "eslint-plugin-react-hooks": "4.3.0",
-    "microbundle": "0.14.2",
-    "prettier": "2.4.1",
-    "release-it": "14.12.5",
-    "rimraf": "3.0.2",
-    "typescript": "4.5.5"
+    "@babel/core": "7.25.2",
+    "@storybook/addon-actions": "8.2.7",
+    "@storybook/addon-essentials": "8.2.7",
+    "@storybook/addon-links": "8.2.7",
+    "@storybook/addon-webpack5-compiler-swc": "1.0.5",
+    "@storybook/react": "8.2.7",
+    "@storybook/react-webpack5": "8.2.7",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "@typescript-eslint/eslint-plugin": "8.0.1",
+    "@typescript-eslint/parser": "8.0.1",
+    "babel-loader": "8.3.0",
+    "csstype": "3.1.3",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-import": "2.29.1",
+    "eslint-plugin-prettier": "5.2.1",
+    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "microbundle": "0.15.1",
+    "prettier": "3.3.3",
+    "release-it": "17.6.0",
+    "rimraf": "6.0.1",
+    "storybook": "^8.2.7",
+    "typescript": "5.5.4"
   },
@@ -66,2 +68,3 @@ "keywords": [
     "toggle",
+    "toggler",
     "select",
@@ -68,0 +71,0 @@ "selector",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

86536

increased by6.87%

Dependency count

4

decreased by-33.33%

Lines of code

249

increased by30.37%

Worsened metrics

Dev dependency count

25

increased by13.64%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedgoober@2.1.14(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedreact-dom@18.3.1(transitive)

• + Addedscheduler@0.23.2(transitive)

• - Removedreact@17.0.2

• - Removedreact-dom@17.0.2

• - Removedgoober@2.1.8(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedreact@17.0.2(transitive)

• - Removedreact-dom@17.0.2(transitive)

• - Removedscheduler@0.20.2(transitive)

• Updatedgoober@2.1.14