<Tabs> and <Tab> finished

components/tabs/tabs.cjsx

@@ -19,19 +19,19 @@ module.exports = React.createClass
 
   # -- Lifecycle
   componentDidMount: ->
-    @setState pointer: @pointerPosition @state.index
+    @setState pointer: _pointerPosition @state.index, @refs.navigation.getDOMNode()
 
   componentWillReceiveProps: (next_props) ->
     index = next_props.index or @state.index
     @setState
       index   : index
-      pointer : @pointerPosition index
+      pointer : _pointerPosition index, @refs.navigation.getDOMNode()
 
   # -- Events
   onClick: (index, event, ref) ->
     @setState
       index   : index
-      pointer : @pointerPosition index
+      pointer : _pointerPosition index, @refs.navigation.getDOMNode()
     @props.onChange? @
 
   # -- Render
@@ -65,9 +65,8 @@ module.exports = React.createClass
       { tabs }
     </div>
 
-  # -- Private methods
+# -- Private methods
-  pointerPosition: (index = 0) ->
+_pointerPosition = (index = 0, navigation) ->
-    navigation = @refs.navigation.getDOMNode()
   label = navigation.children[index].getBoundingClientRect()
   style =
     top   : "#{navigation.getBoundingClientRect().height}px"

components/tabs/tabs.md

@@ -0,0 +1,50 @@
+# Tabs
+
+```javascript
+Tabs = require('../../components/tabs').Tabs
+Tab  = require('../../components/tabs').Tab
+
+<Tabs>
+  <Tab label='Primary'>
+    <small>primary</small>
+  </Tab>
+  <Tab label='Secondary'>
+    <small>secondary</small>
+  </Tab>
+  <Tab label='Third' disabled>
+    <small>third</small>
+  </Tab>
+  <Tab label='Fourth' hidden>
+    <small>fourth</small>
+  </Tab>
+</Tabs>
+```
+
+
+## Properties <Tabs>
+| Name              | Type          | Default         | Description|
+|:-                 |:-:            | :-              |:-|
+| **className**     | String        | `''`            | Additional class name to provide custom styling.|
+| **index**         | Number        | `0`             | Current <Tab> |
+| **onChange**      | Function      |                 | Callback function that is fired when the tab changes.
+
+## Properties <Tab>
+
+| Name              | Type          | Default         | Description|
+|:-                 |:-:            | :-              |:-|
+| **active**        | Boolean       | `false`         | If true, the current component is visible.|
+| **className**     | String        | `''`            | Additional class name to provide custom styling.|
+| **disabled**      | Boolean       | `false`         | If true, the current component is not clickable.|
+| **hidden**        | Boolean       | `false`         | If true, the current component is not visible.|
+| **label**         | String        |                 | Label for navigation|
+| **onActive**      | Function      |                 | Callback function that is fired when the tab is activated. |
+| **tabIndex**      | Number        |                 | Sets the tabindex html attribute.|
+
+## Methods <Tab>
+
+#### active
+Active/Deactive a determinate instance of the <Tab> component.
+
+```
+tab_instance.active(true);
+```

spec/components/tabs.cjsx

@@ -19,5 +19,8 @@ module.exports = React.createClass
         <Tab label='Fourth' hidden>
           <small>Fourth</small>
         </Tab>
+        <Tab label='Fifth'>
+          <small>Fifth</small>
+        </Tab>
       </Tabs>
     </section>

spec/index.cjsx

@@ -12,6 +12,7 @@ Form          = require './components/form'
 Progress      = require './components/progress'
 Slider        = require './components/slider'
 Switch        = require './components/switch'
+Tabs          = require './components/tabs'
 
 Test = React.createClass
 
@@ -31,6 +32,7 @@ Test = React.createClass
       <Progress />
       <Slider />
       <Switch />
+      <Tabs />
     </app>
 
 React.render <Test/>, document.body