@bigbinary/neetoui-rn 0.0.98 → 0.0.99

package/lib/components/CheckBox.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.CheckBox=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["selected","onSelect","checkedComponent","checkedItemProp","disabled","label","labelComponent","labelProp","labelPosition","checkboxContainerProp"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/CheckBox.js";var LABEL_POSITIONS=["left","right"];var LabelComponent=function LabelComponent(_ref){var label=_ref.label,labelComponent=_ref.labelComponent,labelProp=_ref.labelProp;return labelComponent||_react.default.createElement(_.Typography,(0,_extends2.default)({},labelProp,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:8,columnNumber:28}}),label);};var CheckBox=function CheckBox(_ref2){var _ref2$selected=_ref2.selected,selected=_ref2$selected===void 0?false:_ref2$selected,_ref2$onSelect=_ref2.onSelect,onSelect=_ref2$onSelect===void 0?function(){}:_ref2$onSelect,_ref2$checkedComponen=_ref2.checkedComponent,checkedComponent=_ref2$checkedComponen===void 0?null:_ref2$checkedComponen,_ref2$checkedItemProp=_ref2.checkedItemProp,checkedItemProp=_ref2$checkedItemProp===void 0?{}:_ref2$checkedItemProp,_ref2$disabled=_ref2.disabled,disabled=_ref2$disabled===void 0?false:_ref2$disabled,_ref2$label=_ref2.label,label=_ref2$label===void 0?"Option":_ref2$label,_ref2$labelComponent=_ref2.labelComponent,labelComponent=_ref2$labelComponent===void 0?null:_ref2$labelComponent,_ref2$labelProp=_ref2.labelProp,labelProp=_ref2$labelProp===void 0?{}:_ref2$labelProp,_ref2$labelPosition=_ref2.labelPosition,labelPosition=_ref2$labelPosition===void 0?"right":_ref2$labelPosition,_ref2$checkboxContain=_ref2.checkboxContainerProp,checkboxContainerProp=_ref2$checkboxContain===void 0?{}:_ref2$checkboxContain,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);return _react.default.createElement(_.Touchable,(0,_extends2.default)({disabled:disabled,onPress:onSelect,opacity:disabled?0.5:1,flexDirection:"row",alignItems:"center"},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:65,columnNumber:5}}),labelPosition===LABEL_POSITIONS[0]?_react.default.createElement(LabelComponent,{label:label,labelComponent:labelComponent,labelProp:(0,_extends2.default)({mr:2},labelProp),__self:_this,__source:{fileName:_jsxFileName,lineNumber:74,columnNumber:9}}):null,_react.default.createElement(_.Container,(0,_extends2.default)({borderColor:"background.base",borderWidth:1,borderRadius:5,justifyContent:"center",alignItems:"center",width:20,height:20},checkboxContainerProp,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:80,columnNumber:7}}),selected&&_react.default.createElement(_.Container,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:91,columnNumber:11}},checkedComponent||_react.default.createElement(_.Typography,(0,_extends2.default)({},checkedItemProp,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:93,columnNumber:15}}),"\u2713"))),labelPosition===LABEL_POSITIONS[1]?_react.default.createElement(LabelComponent,{label:label,labelComponent:labelComponent,labelProp:(0,_extends2.default)({ml:2},labelProp),__self:_this,__source:{fileName:_jsxFileName,lineNumber:99,columnNumber:9}}):null);};exports.CheckBox=CheckBox;CheckBox.propTypes={selected:_propTypes.default.bool.isRequired,onSelect:_propTypes.default.func.isRequired,disabled:_propTypes.default.bool,checkedComponent:_propTypes.default.element,checkedItemProp:_propTypes.default.object,label:_propTypes.default.string,labelProp:_propTypes.default.object,labelComponent:_propTypes.default.element,labelPosition:_propTypes.default.oneOf(LABEL_POSITIONS),checkboxContainerProp:_propTypes.default.object};LabelComponent.propTypes={label:_propTypes.default.string,labelComponent:_propTypes.default.element,labelProp:_propTypes.default.object};

package/lib/components/RadioButton.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.RadioButton=void 0;var _objectWithoutProperties2=_interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireDefault(require("react"));var _propTypes=_interopRequireDefault(require("prop-types"));var _=require("./");var _excluded=["radioButtonWidth","radioButtonSelectedWidth","containerBg","innerActiveBg","innerInActiveBg","onSelect","selected","density","label","labelComponent","labelProp","labelPosition","disabled"];var _this=this,_jsxFileName="/Users/runner/work/neeto-ui-rn/neeto-ui-rn/src/components/RadioButton.js";var LABEL_POSITIONS=["left","right"];var LabelComponent=function LabelComponent(_ref){var label=_ref.label,labelComponent=_ref.labelComponent,labelProp=_ref.labelProp;return labelComponent||_react.default.createElement(_.Typography,(0,_extends2.default)({},labelProp,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:8,columnNumber:28}}),label);};var RadioButton=function RadioButton(_ref2){var _ref2$radioButtonWidt=_ref2.radioButtonWidth,radioButtonWidth=_ref2$radioButtonWidt===void 0?20:_ref2$radioButtonWidt,_ref2$radioButtonSele=_ref2.radioButtonSelectedWidth,radioButtonSelectedWidth=_ref2$radioButtonSele===void 0?10:_ref2$radioButtonSele,_ref2$containerBg=_ref2.containerBg,containerBg=_ref2$containerBg===void 0?"background.grey":_ref2$containerBg,_ref2$innerActiveBg=_ref2.innerActiveBg,innerActiveBg=_ref2$innerActiveBg===void 0?"background.base":_ref2$innerActiveBg,_ref2$innerInActiveBg=_ref2.innerInActiveBg,innerInActiveBg=_ref2$innerInActiveBg===void 0?"background.secondary":_ref2$innerInActiveBg,_ref2$onSelect=_ref2.onSelect,onSelect=_ref2$onSelect===void 0?function(){}:_ref2$onSelect,_ref2$selected=_ref2.selected,selected=_ref2$selected===void 0?null:_ref2$selected,_ref2$density=_ref2.density,density=_ref2$density===void 0?5:_ref2$density,_ref2$label=_ref2.label,label=_ref2$label===void 0?"Option":_ref2$label,_ref2$labelComponent=_ref2.labelComponent,labelComponent=_ref2$labelComponent===void 0?null:_ref2$labelComponent,_ref2$labelProp=_ref2.labelProp,labelProp=_ref2$labelProp===void 0?{}:_ref2$labelProp,_ref2$labelPosition=_ref2.labelPosition,labelPosition=_ref2$labelPosition===void 0?"right":_ref2$labelPosition,_ref2$disabled=_ref2.disabled,disabled=_ref2$disabled===void 0?false:_ref2$disabled,rest=(0,_objectWithoutProperties2.default)(_ref2,_excluded);return _react.default.createElement(_.Touchable,(0,_extends2.default)({disabled:disabled,opacity:disabled?0.5:1,onPress:onSelect,flexDirection:"row",alignItems:"center",py:1},rest,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:63,columnNumber:5}}),labelPosition===LABEL_POSITIONS[0]?_react.default.createElement(LabelComponent,{label:label,labelComponent:labelComponent,labelProp:(0,_extends2.default)({mr:2},labelProp),__self:_this,__source:{fileName:_jsxFileName,lineNumber:73,columnNumber:9}}):null,_react.default.createElement(_.Container,{bg:containerBg,height:radioButtonWidth,width:radioButtonWidth,borderRadius:radioButtonWidth/2,justifyContent:"center",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:79,columnNumber:7}},_react.default.createElement(_.Container,{height:radioButtonSelectedWidth+density,width:radioButtonSelectedWidth+density,borderRadius:(radioButtonSelectedWidth+density)/2,bg:"background.white",justifyContent:"center",alignItems:"center",__self:_this,__source:{fileName:_jsxFileName,lineNumber:87,columnNumber:9}},_react.default.createElement(_.Container,{bg:selected?innerActiveBg:innerInActiveBg,height:radioButtonSelectedWidth,width:radioButtonSelectedWidth,borderRadius:radioButtonSelectedWidth/2,m:1,__self:_this,__source:{fileName:_jsxFileName,lineNumber:95,columnNumber:11}}))),labelPosition===LABEL_POSITIONS[1]?_react.default.createElement(LabelComponent,{label:label,labelComponent:labelComponent,labelProp:(0,_extends2.default)({ml:2},labelProp),__self:_this,__source:{fileName:_jsxFileName,lineNumber:105,columnNumber:9}}):null);};exports.RadioButton=RadioButton;RadioButton.propTypes={onSelect:_propTypes.default.func.isRequired,selected:_propTypes.default.any.isRequired,label:_propTypes.default.string,labelProp:_propTypes.default.object,labelComponent:_propTypes.default.element,labelPosition:_propTypes.default.oneOf(LABEL_POSITIONS),disabled:_propTypes.default.bool,radioButtonWidth:_propTypes.default.number,radioButtonSelectedWidth:_propTypes.default.number,containerBg:_propTypes.default.string,innerActiveBg:_propTypes.default.string,innerInActiveBg:_propTypes.default.string,density:_propTypes.default.number};LabelComponent.propTypes={label:_propTypes.default.string,labelComponent:_propTypes.default.element,labelProp:_propTypes.default.object};

package/lib/components/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");
+Object.defineProperty(exports,"__esModule",{value:true});Object.defineProperty(exports,"Alert",{enumerable:true,get:function get(){return _Alert.Alert;}});Object.defineProperty(exports,"Avatar",{enumerable:true,get:function get(){return _Avatar.Avatar;}});Object.defineProperty(exports,"Badge",{enumerable:true,get:function get(){return _Badge.Badge;}});Object.defineProperty(exports,"BottomSheet",{enumerable:true,get:function get(){return _BottomSheet.BottomSheet;}});Object.defineProperty(exports,"Button",{enumerable:true,get:function get(){return _Button.Button;}});Object.defineProperty(exports,"ButtonGroup",{enumerable:true,get:function get(){return _ButtonGroup.ButtonGroup;}});Object.defineProperty(exports,"Card",{enumerable:true,get:function get(){return _Card.Card;}});Object.defineProperty(exports,"CheckBox",{enumerable:true,get:function get(){return _CheckBox.CheckBox;}});Object.defineProperty(exports,"Chip",{enumerable:true,get:function get(){return _Chip.Chip;}});Object.defineProperty(exports,"Container",{enumerable:true,get:function get(){return _Container.Container;}});Object.defineProperty(exports,"FAB",{enumerable:true,get:function get(){return _FAB.FAB;}});Object.defineProperty(exports,"Input",{enumerable:true,get:function get(){return _Input.Input;}});Object.defineProperty(exports,"OtpInputs",{enumerable:true,get:function get(){return _OtpInputs.OtpInputs;}});Object.defineProperty(exports,"ParentView",{enumerable:true,get:function get(){return _ParentView.ParentView;}});Object.defineProperty(exports,"Popover",{enumerable:true,get:function get(){return _Popover.Popover;}});Object.defineProperty(exports,"RadioButton",{enumerable:true,get:function get(){return _RadioButton.RadioButton;}});Object.defineProperty(exports,"RichTextEditor",{enumerable:true,get:function get(){return _RichTextEditor.RichTextEditor;}});Object.defineProperty(exports,"Toast",{enumerable:true,get:function get(){return _Toast.Toast;}});Object.defineProperty(exports,"ToggleSwitch",{enumerable:true,get:function get(){return _ToggleSwitch.ToggleSwitch;}});Object.defineProperty(exports,"TopBar",{enumerable:true,get:function get(){return _TopBar.TopBar;}});Object.defineProperty(exports,"Touchable",{enumerable:true,get:function get(){return _Touchable.Touchable;}});Object.defineProperty(exports,"Typography",{enumerable:true,get:function get(){return _Typography.Typography;}});var _Button=require("./Button");var _Container=require("./Container");var _Typography=require("./Typography");var _Input=require("./Input");var _FAB=require("./FAB");var _ToggleSwitch=require("./ToggleSwitch");var _Avatar=require("./Avatar");var _Badge=require("./Badge");var _Toast=require("./Toast");var _Alert=require("./Alert");var _BottomSheet=require("./BottomSheet");var _Chip=require("./Chip");var _ParentView=require("./ParentView");var _RichTextEditor=require("./RichTextEditor");var _ButtonGroup=require("./ButtonGroup");var _OtpInputs=require("./OtpInputs");var _Popover=require("./Popover");var _Touchable=require("./Touchable");var _Card=require("./Card");var _TopBar=require("./TopBar");var _RadioButton=require("./RadioButton");var _CheckBox=require("./CheckBox");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui-rn",
-  "version": "0.0.98",
+  "version": "0.0.99",
   "main": "lib/index.js",
   "author": "BigBinary",
   "license": "MIT",

package/src/components/CheckBox.js

@@ -0,0 +1,156 @@
+import React from "react";
+import Proptypes from "prop-types";
+
+import { Container, Typography, Touchable } from "@components";
+const LABEL_POSITIONS = ["left", "right"];
+
+const LabelComponent = ({ label, labelComponent, labelProp }) => {
+  return labelComponent || <Typography {...labelProp}>{label}</Typography>;
+};
+
+/**
+ *
+ * This component supports below props categories from [styled-system ](/styled-system).
+ * <ul>
+ * <li>flexbox</li>
+ * <li>space</li>
+ * <li>border</li>
+ * <li>layout</li>
+ * <li>color</li>
+ * <li>buttonStyle</li>
+ * </ul>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from "react";
+ * import { Container, CheckBox, Typography } from "@bigbinary/neetoui-rn";
+ *
+ * export default function Main() {
+ *  const [selected, setSelected] = React.useState(false);
+ *
+ *
+ *  return (
+ *    <Container>
+ *      <Container flexDirection="row" my={2}>
+ *        <CheckBox
+ *          selected={selected}
+ *          onSelect={() => setSelected(!selected)}
+ *          checkedComponent={
+ *            <Container width={10} height={10} bg="background.base" />
+ *          }
+ *          label="Agree"
+ *        />
+ *      </Container>
+ *    </Container>
+ *  );
+ * }
+ * ```
+ *
+ */
+
+export const CheckBox = ({
+  selected = false,
+  onSelect = () => {},
+  checkedComponent = null,
+  checkedItemProp = {},
+  disabled = false,
+  label = "Option",
+  labelComponent = null,
+  labelProp = {},
+  labelPosition = "right",
+  checkboxContainerProp = {},
+  ...rest
+}) => {
+  return (
+    <Touchable
+      disabled={disabled}
+      onPress={onSelect}
+      opacity={disabled ? 0.5 : 1}
+      flexDirection="row"
+      alignItems="center"
+      {...rest}
+    >
+      {labelPosition === LABEL_POSITIONS[0] ? (
+        <LabelComponent
+          label={label}
+          labelComponent={labelComponent}
+          labelProp={{ mr: 2, ...labelProp }}
+        />
+      ) : null}
+      <Container
+        borderColor="background.base"
+        borderWidth={1}
+        borderRadius={5}
+        justifyContent="center"
+        alignItems="center"
+        width={20}
+        height={20}
+        {...checkboxContainerProp}
+      >
+        {selected && (
+          <Container>
+            {checkedComponent || (
+              <Typography {...checkedItemProp}>✓</Typography>
+            )}
+          </Container>
+        )}
+      </Container>
+      {labelPosition === LABEL_POSITIONS[1] ? (
+        <LabelComponent
+          label={label}
+          labelComponent={labelComponent}
+          labelProp={{ ml: 2, ...labelProp }}
+        />
+      ) : null}
+    </Touchable>
+  );
+};
+
+CheckBox.propTypes = {
+  /**
+   * Whether checkbox is selected.
+   */
+  selected: Proptypes.bool.isRequired,
+  /**
+   * Function to execute on press.
+   */
+  onSelect: Proptypes.func.isRequired,
+  /**
+   * To disable the component.
+   */
+  disabled: Proptypes.bool,
+  /**
+   * Render custom checked component.
+   */
+  checkedComponent: Proptypes.element,
+  /**
+   * Check mark style.
+   */
+  checkedItemProp: Proptypes.object,
+  /**
+   * Text label to be shown with radio button.
+   */
+  label: Proptypes.string,
+  /**
+   * Props for the label.
+   */
+  labelProp: Proptypes.object,
+  /**
+   * Label can passed as a component as well.
+   */
+  labelComponent: Proptypes.element,
+  /**
+   * Position of label relative to the radio button. It can be either `left` or `right`
+   */
+  labelPosition: Proptypes.oneOf(LABEL_POSITIONS),
+  /**
+   * Extra param to customize checkbox container
+   */
+  checkboxContainerProp: Proptypes.object,
+};
+
+LabelComponent.propTypes = {
+  label: Proptypes.string,
+  labelComponent: Proptypes.element,
+  labelProp: Proptypes.object,
+};

package/src/components/RadioButton.js

@@ -0,0 +1,174 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import { Container, Touchable, Typography } from "@components";
+const LABEL_POSITIONS = ["left", "right"];
+
+const LabelComponent = ({ label, labelComponent, labelProp }) => {
+  return labelComponent || <Typography {...labelProp}>{label}</Typography>;
+};
+
+/**
+ *
+ * This component supports below props categories from [styled-system ](/styled-system).
+ * <ul>
+ * <li>flexbox</li>
+ * <li>space</li>
+ * <li>border</li>
+ * <li>layout</li>
+ * <li>color</li>
+ * <li>buttonStyle</li>
+ * </ul>
+ *
+ *  ## Usage
+ * ```js
+ * import * as React from "react";
+ * import { Container, RadioButton } from "@bigbinary/neetoui-rn";
+ *
+ * export default function Main() {
+ *  const [selected, setSelected] = useState(false);
+ *
+ *   return (
+ *     <Container>
+ *      <RadioButton
+ *       selected={selected}
+ *       onSelect={() => setSelected(!selected)}
+ *       label="option label 1"
+ *       labelPosition="left"
+ *      />
+ *     </Container>
+ *   );
+ *  }
+ * ```
+ *
+ */
+
+export const RadioButton = ({
+  radioButtonWidth = 20,
+  radioButtonSelectedWidth = 10,
+  containerBg = "background.grey",
+  innerActiveBg = "background.base",
+  innerInActiveBg = "background.secondary",
+  onSelect = () => {},
+  selected = null,
+  density = 5,
+  label = "Option",
+  labelComponent = null,
+  labelProp = {},
+  labelPosition = "right",
+  disabled = false,
+  ...rest
+}) => {
+  return (
+    <Touchable
+      disabled={disabled}
+      opacity={disabled ? 0.5 : 1}
+      onPress={onSelect}
+      flexDirection="row"
+      alignItems="center"
+      py={1}
+      {...rest}
+    >
+      {labelPosition === LABEL_POSITIONS[0] ? (
+        <LabelComponent
+          label={label}
+          labelComponent={labelComponent}
+          labelProp={{ mr: 2, ...labelProp }}
+        />
+      ) : null}
+      <Container
+        bg={containerBg}
+        height={radioButtonWidth}
+        width={radioButtonWidth}
+        borderRadius={radioButtonWidth / 2}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <Container
+          height={radioButtonSelectedWidth + density}
+          width={radioButtonSelectedWidth + density}
+          borderRadius={(radioButtonSelectedWidth + density) / 2}
+          bg="background.white"
+          justifyContent="center"
+          alignItems="center"
+        >
+          <Container
+            bg={selected ? innerActiveBg : innerInActiveBg}
+            height={radioButtonSelectedWidth}
+            width={radioButtonSelectedWidth}
+            borderRadius={radioButtonSelectedWidth / 2}
+            m={1}
+          />
+        </Container>
+      </Container>
+      {labelPosition === LABEL_POSITIONS[1] ? (
+        <LabelComponent
+          label={label}
+          labelComponent={labelComponent}
+          labelProp={{ ml: 2, ...labelProp }}
+        />
+      ) : null}
+    </Touchable>
+  );
+};
+
+RadioButton.propTypes = {
+  /**
+   * Function to execute on press.
+   */
+  onSelect: PropTypes.func.isRequired,
+  /**
+   * Whether radio is selected.
+   */
+  selected: PropTypes.any.isRequired,
+  /**
+   * Text label to be shown with radio button.
+   */
+  label: PropTypes.string,
+  /**
+   * Props for the label.
+   */
+  labelProp: PropTypes.object,
+  /**
+   * Label can passed as a component as well.
+   */
+  labelComponent: PropTypes.element,
+  /**
+   * Position of label relative to the radio button. It can be either `left` or `right`
+   */
+  labelPosition: PropTypes.oneOf(LABEL_POSITIONS),
+  /**
+   * Whether radio is disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Size of radio button.
+   */
+  radioButtonWidth: PropTypes.number,
+  /**
+   * Size of radio button when selected.
+   */
+  radioButtonSelectedWidth: PropTypes.number,
+  /**
+   * Background color of radio button.
+   */
+  containerBg: PropTypes.string,
+  /**
+   * Color of radio button when selected.
+   */
+  innerActiveBg: PropTypes.string,
+  /**
+   * Color of radio button when not selected.
+   */
+  innerInActiveBg: PropTypes.string,
+  /**
+   * Thickness of radio button container component.
+   */
+  density: PropTypes.number,
+};
+
+LabelComponent.propTypes = {
+  label: PropTypes.string,
+  labelComponent: PropTypes.element,
+  labelProp: PropTypes.object,
+};

package/src/components/index.js

@@ -18,3 +18,5 @@ export { Popover } from "./Popover";
 export { Touchable } from "./Touchable";
 export { Card } from "./Card";
 export { TopBar } from "./TopBar";
+export { RadioButton } from "./RadioButton";
+export { CheckBox } from "./CheckBox";