react-jupiter 5.12.0 → 6.0.0-beta.10

package/form/dropdown/index.stories.js

@@ -1,62 +1,119 @@
-"use strict";var _react=_interopRequireDefault(require("react")),_react2=require("@storybook/react"),_addonInfo=require("@storybook/addon-info"),_addonActions=require("@storybook/addon-actions"),_addonKnobs=require("@storybook/addon-knobs"),_select=_interopRequireDefault(require("./select")),_option=_interopRequireDefault(require("./option"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}
-
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.WithPlaceholderAndOptions=exports.WithPlaceholder=exports.WithError=exports.Minimal=exports.FullOptions=exports.DisabledOption=exports.Disabled=exports.CustomOption=void 0;var _react=_interopRequireDefault(require("react")),_addonActions=require("@storybook/addon-actions"),_select=_interopRequireDefault(require("./select")),_option=_interopRequireDefault(require("./option"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}var _default=exports.default=
 
 
 
 
 
+{
+title:"Form/Dropdown",
+component:_select.default,
 
+argTypes:{
+htmlElementName:{
+control:"text",
+defaultValue:"\u0627\u0633\u062A\u0627\u0646"
+},
+placeholder:{
+control:"text",
+defaultValue:"__\u0627\u0633\u062A\u0627\u0646 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F__"
+},
+defaultValue:{
+control:"text",
+defaultValue:"30"
+},
+isDisabled:{
+control:"boolean",
+defaultValue:!1
+},
+label:{
+control:"text",
+defaultValue:"\u0645\u062D\u0644 \u0628\u0631\u06AF\u0632\u0627\u0631\u06CC \u0631\u0648\u06CC\u062F\u0627\u062F"
+},
+errorMessage:{
+control:"text",
+defaultValue:"\u0627\u0631\u0648\u0631 \u0632\u06CC\u0628\u0627"
+},
+handleChange:{
+action:"handleChange"
+}
+}
+};const
 
+Template=(a)=>/*#__PURE__*/
+_react.default.createElement(_select.default,a,/*#__PURE__*/
+_react.default.createElement(_option.default,{value:"first",label:"First Value"}),/*#__PURE__*/
+_react.default.createElement(_option.default,{value:"sec",label:"2nd Value"})
+),
 
 
+Minimal=exports.Minimal=Template.bind({});
+Minimal.args={};
 
-(0,_react2.storiesOf)("Form/Dropdown",module).
-add("Minimal Select",()=>/*#__PURE__*/
-_react.default.createElement(_select.default,null,/*#__PURE__*/
-_react.default.createElement(_option.default,{value:"first",label:"First Value"}),/*#__PURE__*/
-_react.default.createElement(_option.default,{value:"sec",label:"2nd Value"})
-)
-).
-add("Select with placeholder",()=>/*#__PURE__*/
-_react.default.createElement(_select.default,{
-htmlElementName:(0,_addonKnobs.text)("optional htmlElementName","\u0627\u0633\u062A\u0627\u0646"),
-placeholder:(0,_addonKnobs.text)("optional placeholder","__\u0627\u0633\u062A\u0627\u0646 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F__"),
-handleChange:(0,_addonActions.action)("trigger what you want to do in onChange function")},/*#__PURE__*/
+const WithPlaceholder=exports.WithPlaceholder=Template.bind({});
+WithPlaceholder.args={
+htmlElementName:"\u0627\u0633\u062A\u0627\u0646",
+placeholder:"__\u0627\u0633\u062A\u0627\u0646 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F__",
+handleChange:(0,_addonActions.action)("trigger what you want to do in onChange function")
+};const
 
+WithOptionsTemplate=(a)=>/*#__PURE__*/
+_react.default.createElement(_select.default,a,/*#__PURE__*/
 _react.default.createElement(_option.default,{value:"20",label:"\u06A9\u0631\u062C"}),/*#__PURE__*/
 _react.default.createElement(_option.default,{value:"30",label:"\u062A\u0647\u0631\u0627\u0646"}),/*#__PURE__*/
-_react.default.createElement(_option.default,{value:"40",label:"\u0641\u0645"})
-)
-).
-add("Full option Select(no placeholder)",()=>/*#__PURE__*/
-_react.default.createElement(_select.default,{
-htmlElementName:(0,_addonKnobs.text)("optional htmlElementName","\u0627\u0633\u062A\u0627\u0646"),
-defaultValue:(0,_addonKnobs.text)("optional defaultValue(if its not et or set wrong get the first option)","30"),
+_react.default.createElement(_option.default,{value:"40",label:"\u0641\u0645",isDisabled:!0})
+),
+
+
+FullOptions=exports.FullOptions=WithOptionsTemplate.bind({});
+FullOptions.args={
+htmlElementName:"\u0627\u0633\u062A\u0627\u0646",
+defaultValue:"30",
 handleChange:(0,_addonActions.action)("trigger what you want to do in onChange function"),
-isDisabled:(0,_addonKnobs.boolean)("disabled(default : false)",!1),
-label:(0,_addonKnobs.text)("optional label","\u0645\u062D\u0644 \u0628\u0631\u06AF\u0632\u0627\u0631\u06CC \u0631\u0648\u06CC\u062F\u0627\u062F"),
-errorMessage:(0,_addonKnobs.text)("optional error msg","\u0627\u0631\u0648\u0631 \u0632\u06CC\u0628\u0627")},/*#__PURE__*/
+isDisabled:!1,
+label:"\u0645\u062D\u0644 \u0628\u0631\u06AF\u0632\u0627\u0631\u06CC \u0631\u0648\u06CC\u062F\u0627\u062F",
+errorMessage:"\u0627\u0631\u0648\u0631 \u0632\u06CC\u0628\u0627"
+};
 
-_react.default.createElement(_option.default,{value:"20",label:"\u06A9\u0631\u062C"}),/*#__PURE__*/
-_react.default.createElement(_option.default,{value:"30",label:"\u062A\u0647\u0631\u0627\u0646"}),/*#__PURE__*/
-_react.default.createElement(_option.default,{value:"40",label:"\u0641\u0645",isDisabled:!0})
-)
-).
-add("Full option SelectOption",()=>/*#__PURE__*/
+const WithPlaceholderAndOptions=exports.WithPlaceholderAndOptions=WithOptionsTemplate.bind({});
+WithPlaceholderAndOptions.args={
+...FullOptions.args,
+placeholder:"__\u0627\u0633\u062A\u0627\u0646 \u0645\u0648\u0631\u062F \u0646\u0638\u0631 \u062E\u0648\u062F \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F__"
+};
+
+const Disabled=exports.Disabled=WithOptionsTemplate.bind({});
+Disabled.args={
+...FullOptions.args,
+isDisabled:!0
+};
+
+const WithError=exports.WithError=WithOptionsTemplate.bind({});
+WithError.args={
+...FullOptions.args,
+errorMessage:"\u0644\u0637\u0641\u0627 \u06CC\u06A9 \u06AF\u0632\u06CC\u0646\u0647 \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F"
+};const
+
+SelectOptionTemplate=(a)=>/*#__PURE__*/
 _react.default.createElement(_select.default,{
 htmlElementName:"\u0627\u0633\u062A\u0627\u0646",
 defaultValue:"30",
 handleChange:(0,_addonActions.action)("trigger what you want to do in onChange function"),
 isDisabled:!1},/*#__PURE__*/
 
-_react.default.createElement(_option.default,{
-value:(0,_addonKnobs.text)("value","20"),
-label:(0,_addonKnobs.text)("label","\u06A9\u0631\u062C"),
-isDisabled:(0,_addonKnobs.boolean)("disabled(default : false)",!1)}
-),/*#__PURE__*/
+_react.default.createElement(_option.default,a),/*#__PURE__*/
 _react.default.createElement(_option.default,{value:"30",label:"\u062A\u0647\u0631\u0627\u0646"}),/*#__PURE__*/
 _react.default.createElement(_option.default,{value:"40",label:"\u0641\u0645"})
-)
-).
-addDecorator(_addonInfo.withInfo).
-addDecorator(_addonKnobs.withKnobs);
+),
+
+
+CustomOption=exports.CustomOption=SelectOptionTemplate.bind({});
+CustomOption.args={
+value:"20",
+label:"\u06A9\u0631\u062C",
+isDisabled:!1
+};
+
+const DisabledOption=exports.DisabledOption=SelectOptionTemplate.bind({});
+DisabledOption.args={
+...CustomOption.args,
+isDisabled:!0
+};

package/form/dropdown/index.style.js

@@ -1,55 +1,57 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.StyledSelect=exports.SelectButton=void 0;var _templateObject,_templateObject2,_styledComponents=_interopRequireDefault(require("styled-components"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}const
-
-SelectButton=exports.SelectButton=_styledComponents.default.div(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  position: relative;\n\n  &:after {\n    content: \"\";\n    display: block;\n    width: 7px;\n    height: 7px;\n    position: absolute;\n    left: 15px;\n    top: 11px;\n    border: solid ",";\n    border-width: 0 2px 2px 0;\n    transform: rotate(45deg);\n    -webkit-transform: rotate(45deg);\n    pointer-events: none;\n  }\n\n  &:before {\n    content: \"\";\n    display: block;\n    width: 37px;\n    position: absolute;\n    margin-top: 2px;\n    top: 0;\n    bottom: 1px;\n    left: 1px;\n    border-right: 1px solid ",";\n    background: ",";\n    pointer-events: none;\n  }\n"])),
-
-
-
-
-
-
-
-
-
-
-(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.normal},
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.normal},
-(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.background:"white"}),
-
-
-
-
-StyledSelect=exports.StyledSelect=_styledComponents.default.select(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n  font-family: 'IranSharp';\n  font-weight: bold;\n  font-size: 12px;\n  border-radius: ",";\n  border: solid 1px ",";\n  padding: 4px;\n  box-sizing: border-box;\n  width: 100%;\n  background: ",";\n  ","\n  ","\n  cursor: ",";\n\n  &:hover {\n    border-color: ",";\n  }\n\n  &:focus {\n    border-color: ",";\n  }\n"])),
-
-
-
-(a)=>{let{theme:b}=a;return"".concat(b.borderRadius,"px")},
-(a)=>{let{disabled:b,theme:c}=a;return b?"transparent":c.borderColor.normal},
-
-
-
-(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.background:"white"},
-(a)=>{let{disabled:b,theme:c}=a;return b?"color: ".concat(c.disabled.color,";"):""},
-(a)=>{let{disabled:b,theme:c}=a;return b?"color: ".concat(c.disabled.color,";"):""},
-(a)=>{let{disabled:b}=a;return b?"not-allowed":"pointer"},
-
-
-(a)=>{let{disabled:b,theme:c}=a;return b?"transparent":c.borderColor.hover},
-
-
-
-(a)=>{let{theme:b}=a;return b.borderColor.focus});
+"use strict";var _styledComponents=_interopRequireDefault(require("styled-components"));Object.defineProperty(exports,"__esModule",{value:!0}),exports.StyledSelect=exports.SelectButton=void 0;function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}const
+
+SelectButton=exports.SelectButton=_styledComponents.default.div`
+  position: relative;
+
+  &:after {
+    content: "";
+    display: block;
+    width: 7px;
+    height: 7px;
+    position: absolute;
+    left: 15px;
+    top: 11px;
+    border: solid ${(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.normal}};
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    pointer-events: none;
+  }
+
+  &:before {
+    content: "";
+    display: block;
+    width: 37px;
+    position: absolute;
+    margin-top: 2px;
+    top: 0;
+    bottom: 1px;
+    left: 1px;
+    border-right: 1px solid ${(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.normal}};
+    background: ${(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.background:"white"}};
+    pointer-events: none;
+  }
+`,
+
+StyledSelect=exports.StyledSelect=_styledComponents.default.select`
+  font-family: 'IranSharp';
+  font-weight: bold;
+  font-size: 12px;
+  border-radius: ${(a)=>{let{theme:b}=a;return`${b.borderRadius}px`}};
+  border: solid 1px ${(a)=>{let{disabled:b,theme:c}=a;return b?"transparent":c.borderColor.normal}};
+  padding: 4px;
+  box-sizing: border-box;
+  width: 100%;
+  background: ${(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.background:"white"}};
+  ${(a)=>{let{disabled:b,theme:c}=a;return b?`color: ${c.disabled.color};`:""}}
+  ${(a)=>{let{disabled:b,theme:c}=a;return b?`color: ${c.disabled.color};`:""}}
+  cursor: ${(a)=>{let{disabled:b}=a;return b?"not-allowed":"pointer"}};
+
+  &:hover {
+    border-color: ${(a)=>{let{disabled:b,theme:c}=a;return b?"transparent":c.borderColor.hover}};
+  }
+
+  &:focus {
+    border-color: ${(a)=>{let{theme:b}=a;return b.borderColor.focus}};
+  }
+`;

package/form/dropdown/option.js

@@ -8,7 +8,7 @@
 const SelectOption=(a)=>{
 const{label:b,value:c,isDisabled:d=!1}=a;
 
-return/*#__PURE__*/(
+return(/*#__PURE__*/
 _react.default.createElement("option",{
 disabled:d,
 value:c,

package/form/dropdown/select.js

@@ -52,7 +52,7 @@ _react.default.createElement(_errorMsg.default,{errorMessage:j})
 );return(
 
 
-g?/*#__PURE__*/
+g)?/*#__PURE__*/
 
 _react.default.createElement("label",{htmlFor:d},/*#__PURE__*/
 _react.default.createElement(_typography.Text,{size:14,bold:!0,isDisplayBlock:!0},
@@ -62,7 +62,7 @@ l()
 ):
 
 
-l())
+l()
 };var _default=exports.default=
 
 Select;

package/form/errorMsg.js

@@ -4,7 +4,7 @@
 
 
 const ErrorMsg=(a)=>{let{errorMessage:b=""}=a;return(
-b?/*#__PURE__*/
+b)?/*#__PURE__*/
 
 _react.default.createElement(_spacing.Margin,{top:4},/*#__PURE__*/
 _react.default.createElement(_icon.default,{name:"error",color:"red",size:"sm",stickyRight:!0}),/*#__PURE__*/
@@ -15,7 +15,7 @@ b
 
 
 
-null)
+null
 };var _default=exports.default=
 
 ErrorMsg;

package/form/radio/index.stories.js

@@ -1,56 +1,119 @@
-"use strict";var _react=_interopRequireDefault(require("react")),_react2=require("@storybook/react"),_addonInfo=require("@storybook/addon-info"),_addonActions=require("@storybook/addon-actions"),_addonKnobs=require("@storybook/addon-knobs"),_radio=_interopRequireDefault(require("./radio")),_radioOption=_interopRequireDefault(require("./radio-option"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=exports.WithError=exports.WithDefaultValue=exports.VerticalLayout=exports.Minimal=exports.FullOptions=exports.DisabledOption=exports.Disabled=exports.CustomOption=void 0;var _react=_interopRequireDefault(require("react")),_addonActions=require("@storybook/addon-actions"),_radio=_interopRequireDefault(require("./radio")),_radioOption=_interopRequireDefault(require("./radio-option"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}var _default=exports.default=
 
 
 
 
 
+{
+title:"Form/Radio",
+component:_radio.default,
 
+argTypes:{
+groupName:{
+control:"text",
+defaultValue:"degree"
+},
+label:{
+control:"text",
+defaultValue:"\u0622\u062E\u0631\u06CC\u0646 \u0645\u062F\u0631\u06A9 \u062A\u062D\u0635\u06CC\u0644\u06CC \u062E\u0648\u062F \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F"
+},
+defaultCheckedValue:{
+control:"text",
+defaultValue:"300"
+},
+isDisabled:{
+control:"boolean",
+defaultValue:!1
+},
+type:{
+control:"select",
+options:["horizontal","vertical"],
+defaultValue:"horizontal"
+},
+errorMessage:{
+control:"text",
+defaultValue:"\u0627\u0631\u0648\u0631 \u0632\u06CC\u0628\u0627"
+},
+handleChange:{
+action:"handleChange"
+}
+}
+};const
 
-
-
-
-
-
-(0,_react2.storiesOf)("Form/Radio",module).
-add("Minimal Form/Radio",()=>/*#__PURE__*/
-_react.default.createElement(_radio.default,null,/*#__PURE__*/
+Template=(a)=>/*#__PURE__*/
+_react.default.createElement(_radio.default,a,/*#__PURE__*/
 _react.default.createElement(_radioOption.default,{value:"first",label:"First Value"}),/*#__PURE__*/
 _react.default.createElement(_radioOption.default,{value:"sec",label:"Sec Value"}),/*#__PURE__*/
 _react.default.createElement(_radioOption.default,{value:"third",label:"Third Value"})
-)
-).
-add("Full option Radio",()=>/*#__PURE__*/
-_react.default.createElement(_radio.default,{
-groupName:(0,_addonKnobs.text)("optional groupName(but highly recommended to set manually)","degree"),
-label:(0,_addonKnobs.text)("optional label","\u0622\u062E\u0631\u06CC\u0646 \u0645\u062F\u0631\u06A9 \u062A\u062D\u0635\u06CC\u0644\u06CC \u062E\u0648\u062F \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F"),
+),
+
+
+Minimal=exports.Minimal=Template.bind({});
+Minimal.args={};
+
+const FullOptions=exports.FullOptions=Template.bind({});
+FullOptions.args={
+groupName:"degree",
+label:"\u0622\u062E\u0631\u06CC\u0646 \u0645\u062F\u0631\u06A9 \u062A\u062D\u0635\u06CC\u0644\u06CC \u062E\u0648\u062F \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F",
 defaultCheckedValue:"300",
 handleChange:(0,_addonActions.action)("trigger what you want to do in onChange function"),
-isDisabled:(0,_addonKnobs.boolean)("optional disabled all",!1),
-type:(0,_addonKnobs.select)("optional type",["horizontal","vertical"]),
-errorMessage:(0,_addonKnobs.text)("optional error msg","\u0627\u0631\u0648\u0631 \u0632\u06CC\u0628\u0627")},/*#__PURE__*/
+isDisabled:!1,
+type:"horizontal",
+errorMessage:"\u0627\u0631\u0648\u0631 \u0632\u06CC\u0628\u0627"
+};const
 
+FullOptionsTemplate=(a)=>/*#__PURE__*/
+_react.default.createElement(_radio.default,a,/*#__PURE__*/
 _react.default.createElement(_radioOption.default,{value:"100",label:"\u0632\u06CC\u0631 \u062F\u06CC\u067E\u0644\u0645"}),/*#__PURE__*/
 _react.default.createElement(_radioOption.default,{value:"234",label:"\u062F\u06CC\u067E\u0644\u0645"}),/*#__PURE__*/
 _react.default.createElement(_radioOption.default,{value:"300",label:"\u06A9\u0627\u0631\u0634\u0646\u0627\u0633\u06CC"}),/*#__PURE__*/
 _react.default.createElement(_radioOption.default,{value:"400",label:"\u06A9\u0627\u0631\u0634\u0646\u0627\u0633\u06CC \u0627\u0631\u0634\u062F"}),/*#__PURE__*/
 _react.default.createElement(_radioOption.default,{value:"500",label:"\u062F\u06A9\u062A\u0631\u0627"})
-)
-).
-add("Full option RadioOption",()=>/*#__PURE__*/
-_react.default.createElement(_radio.default,{
-groupName:"degree",
-label:"\u0622\u062E\u0631\u06CC\u0646 \u0645\u062F\u0631\u06A9 \u062A\u062D\u0635\u06CC\u0644\u06CC \u062E\u0648\u062F \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F"},/*#__PURE__*/
+),
+
+
+WithDefaultValue=exports.WithDefaultValue=FullOptionsTemplate.bind({});
+WithDefaultValue.args={
+...FullOptions.args
+};
+
+const VerticalLayout=exports.VerticalLayout=FullOptionsTemplate.bind({});
+VerticalLayout.args={
+...FullOptions.args,
+type:"vertical"
+};
+
+const Disabled=exports.Disabled=FullOptionsTemplate.bind({});
+Disabled.args={
+...FullOptions.args,
+isDisabled:!0
+};
 
-_react.default.createElement(_radioOption.default,{
-label:(0,_addonKnobs.text)("label","\u0632\u06CC\u0631 \u062F\u06CC\u067E\u0644\u0645"),
-value:(0,_addonKnobs.text)("value","100"),
-isDisabled:(0,_addonKnobs.boolean)("optional disabled item",!1)}
-),/*#__PURE__*/
+const WithError=exports.WithError=FullOptionsTemplate.bind({});
+WithError.args={
+...FullOptions.args,
+errorMessage:"\u0644\u0637\u0641\u0627 \u06CC\u06A9 \u06AF\u0632\u06CC\u0646\u0647 \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F"
+};const
+
+RadioOptionTemplate=(a)=>/*#__PURE__*/
+_react.default.createElement(_radio.default,{groupName:"degree",label:"\u0622\u062E\u0631\u06CC\u0646 \u0645\u062F\u0631\u06A9 \u062A\u062D\u0635\u06CC\u0644\u06CC \u062E\u0648\u062F \u0631\u0627 \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F"},/*#__PURE__*/
+_react.default.createElement(_radioOption.default,a),/*#__PURE__*/
 _react.default.createElement(_radioOption.default,{value:"200",label:"\u062F\u06CC\u067E\u0644\u0645"}),/*#__PURE__*/
 _react.default.createElement(_radioOption.default,{value:"300",label:"\u06A9\u0627\u0631\u0634\u0646\u0627\u0633\u06CC"}),/*#__PURE__*/
 _react.default.createElement(_radioOption.default,{value:"400",label:"\u06A9\u0627\u0631\u0634\u0646\u0627\u0633\u06CC \u0627\u0631\u0634\u062F"}),/*#__PURE__*/
 _react.default.createElement(_radioOption.default,{value:"500",label:"\u062F\u06A9\u062A\u0631\u0627"})
-)
-).
-addDecorator(_addonInfo.withInfo).
-addDecorator(_addonKnobs.withKnobs);
+),
+
+
+CustomOption=exports.CustomOption=RadioOptionTemplate.bind({});
+CustomOption.args={
+label:"\u0632\u06CC\u0631 \u062F\u06CC\u067E\u0644\u0645",
+value:"100",
+isDisabled:!1
+};
+
+const DisabledOption=exports.DisabledOption=RadioOptionTemplate.bind({});
+DisabledOption.args={
+...CustomOption.args,
+isDisabled:!0
+};

package/form/radio/index.style.js

@@ -1,52 +1,61 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.RadioWrapper=exports.Input=exports.Fieldset=void 0;var _templateObject,_templateObject2,_templateObject3,_styledComponents=_interopRequireDefault(require("styled-components"));function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}function _taggedTemplateLiteral(a,b){return b||(b=a.slice(0)),Object.freeze(Object.defineProperties(a,{raw:{value:Object.freeze(b)}}))}const
-
-Fieldset=exports.Fieldset=_styledComponents.default.fieldset(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  border: none;\n  padding: 0;\n  margin: 0;\n   * {\n    box-sizing: content-box;\n  }\n"]))),
-
-
-
-
-
-
-
-
-RadioWrapper=exports.RadioWrapper=_styledComponents.default.div(_templateObject2||(_templateObject2=_taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  ","\n"])),
-
-
-(a)=>{let{type:b}=a;return"vertical"===b?"flex-direction: column;":""}),
-
-
-Input=exports.Input=_styledComponents.default.input(_templateObject3||(_templateObject3=_taggedTemplateLiteral(["\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n\n  border-radius: 50%;\n  width: 16px;\n  height: 16px;\n  margin-right: 5px;\n  position: relative;\n  top: 4px;\n  \n  border: 1px solid ",";\n  cursor: ",";\n  transition: background 0.2s linear;\n\n  &:hover {\n    border: 1px solid ",";\n  }\n\n  &:checked {\n    border: 5px solid ",";\n    width: 8px;\n    height: 8px;\n    background: ",";\n\n    &:after {\n      background: ",";\n    }\n  }\n\n  &:after {\n    content: '';\n    display: block;\n    background: ",";\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    border-radius: 100%;\n    z-index: -1;\n    top: -6px;\n    right: -6px;\n  }\n"])),
-
-
-
-
-
-
-
-
-
-
-
-(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.normal},
-(a)=>{let{disabled:b}=a;return b?"not-allowed":"pointer"},
-
-
-
-(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.hover},
-
-
-
-(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.background:"white"},
-
-
-(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.focus},
-
-
-(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.focus},
-
-
-
-
-
-
-(a)=>{let{disabled:b}=a;return b?"white":"transparent"});
+"use strict";var _styledComponents=_interopRequireDefault(require("styled-components"));Object.defineProperty(exports,"__esModule",{value:!0}),exports.RadioWrapper=exports.Input=exports.Fieldset=void 0;function _interopRequireDefault(a){return a&&a.__esModule?a:{default:a}}const
+
+Fieldset=exports.Fieldset=_styledComponents.default.fieldset`
+  border: none;
+  padding: 0;
+  margin: 0;
+   * {
+    box-sizing: content-box;
+  }
+`,
+
+RadioWrapper=exports.RadioWrapper=_styledComponents.default.div`
+  display: flex;
+  justify-content: space-between;
+  ${(a)=>{let{type:b}=a;return"vertical"===b?"flex-direction: column;":""}}
+`,
+
+Input=exports.Input=_styledComponents.default.input`
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  margin-right: 5px;
+  position: relative;
+  top: 4px;
+  
+  border: 1px solid ${(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.normal}};
+  cursor: ${(a)=>{let{disabled:b}=a;return b?"not-allowed":"pointer"}};
+  transition: background 0.2s linear;
+
+  &:hover {
+    border: 1px solid ${(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.hover}};
+  }
+
+  &:checked {
+    border: 5px solid ${(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.background:"white"}};
+    width: 8px;
+    height: 8px;
+    background: ${(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.focus}};
+
+    &:after {
+      background: ${(a)=>{let{disabled:b,theme:c}=a;return b?c.disabled.color:c.borderColor.focus}};
+    }
+  }
+
+  &:after {
+    content: '';
+    display: block;
+    background: ${(a)=>{let{disabled:b}=a;return b?"white":"transparent"}};
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 100%;
+    z-index: -1;
+    top: -6px;
+    right: -6px;
+  }
+`;

package/form/radio/radio-option.js

@@ -20,9 +20,9 @@ const RadioOption=(a)=>
 
 
 {let{label:b,value:c,isDisabled:e=!1,defaultCheckedValue:f="",inputRef:g=null,groupName:d}=a;
-const h="".concat(d,"-").concat(c,"-").concat(b.split(" ").join(""));
+const h=`${d}-${c}-${b.split(" ").join("")}`;
 
-return/*#__PURE__*/(
+return(/*#__PURE__*/
 _react.default.createElement(_styledComponents.ThemeProvider,{theme:_theme.default},/*#__PURE__*/
 _react.default.createElement("label",{htmlFor:h},/*#__PURE__*/
 _react.default.createElement(_index.Input,{

package/form/radio/radio.js

@@ -27,7 +27,7 @@ const Radio=(a)=>
 {let{groupName:c="radio-element",label:d="",handleChange:e=()=>{},defaultCheckedValue:f="",isDisabled:g=!1,type:h="horizontal",errorMessage:i="",children:b}=a;
 const j=_react.default.Children.toArray(b);
 
-return/*#__PURE__*/(
+return(/*#__PURE__*/
 _react.default.createElement(_index.Fieldset,{onChange:e},/*#__PURE__*/
 _react.default.createElement(_globalStyle.default,null),
 d&&/*#__PURE__*/
@@ -40,10 +40,10 @@ d
 _react.default.createElement(_index.RadioWrapper,{type:h},
 j.map(
 (a)=>
-g?/*#__PURE__*/
-_react.default.cloneElement(a,{groupName:c,defaultCheckedValue:f,isDisabled:g}):/*#__PURE__*/
+g?(/*#__PURE__*/
+_react.default.cloneElement(a,{groupName:c,defaultCheckedValue:f,isDisabled:g})):(/*#__PURE__*/
 
-_react.default.cloneElement(a,{groupName:c,defaultCheckedValue:f})
+_react.default.cloneElement(a,{groupName:c,defaultCheckedValue:f}))
 
 
 )