First spec

components/switch/index.cjsx

@@ -0,0 +1,49 @@
+require './style'
+Ripple = require "../ripple"
+
+module.exports = React.createClass
+
+  # -- States & Properties
+  propTypes:
+    className : React.PropTypes.string
+    disabled  : React.PropTypes.bool
+    label     : React.PropTypes.string
+    onChange  : React.PropTypes.func
+    value     : React.PropTypes.bool
+
+  getDefaultProps: ->
+    className : ""
+
+  getInitialState: ->
+    value     : @props.value
+    ripple    : undefined
+
+  # -- Lifecycle
+  componentWillReceiveProps: (next_props) ->
+    @setState value: next_props.value if next_props.value
+
+  # -- Events
+  onClick: (event) ->
+    unless @props.disabled
+      @setState
+        value : not @state.value
+        ripple: change: true
+      @props.onChange? event, @
+
+  # -- Render
+  render: ->
+    className = @props.className
+    className += " checked" if @state.value
+    className += " disabled" if @props.disabled
+    <div data-component-switch className={className} onClick={@onClick}>
+      <span></span>
+      { <label>{@props.label}</label> if @props.label }
+      <Ripple origin={@state.ripple} />
+    </div>
+
+  # -- Extends
+  getValue: ->
+    @state.value
+
+  setValue: (data) ->
+    @setState value: data

components/switch/style.styl

@@ -0,0 +1,60 @@
+@import "../constants.styl"
+
+[data-component-switch]
+  position                            : relative
+  margin-bottom                       : SPACE
+  height                              : SIZE = (SPACE / 1.25)
+  width                               : WIDTH = (2.5 * SIZE)
+  background-color                    : FORM_BORDER_COLOR
+  border-radius                       : SPACE
+  transition                            background-color ANIMATION_DURATION ANIMATION_EASE
+
+  // -- Children
+  > *
+    pointer-events                    : none
+  > span
+    position                          : absolute
+    top                               : -(SIZE / 5)
+    right                             : (SPACE)
+    width                             : (SIZE * 1.35)
+    height                            : (SIZE * 1.35)
+    border-radius                     : 50%
+    background-color                  : WHITE
+    transition-property                 background-color, box-shadow, right
+    transition-duration                 ANIMATION_DURATION
+    transition-timing-function          ANIMATION_EASE
+  > label
+    display                           : block
+    margin-left                       : WIDTH + (SPACE / 2)
+    font-size                         : FONT_SIZE_SMALL
+    color                             : FORM_COLOR
+  > [data-component-ripple]
+    z-index                           : -1
+    overflow                          : hidden
+    max-width                         : (SIZE * 2.7)
+    max-height                        : (SIZE * 2.7)
+    top                               : (SIZE / 2)
+    left                              : (SIZE * 2)
+    background-color                  : alpha(COLOR, 10%)
+    opacity                           : 0
+    animation-duration                  (1.0 * ANIMATION_DURATION)
+
+  // -- Style
+  &:not(.disabled)
+    cursor                            : pointer
+    > span
+      box-shadow                      : ZDEPTH_SHADOW_1
+  &.disabled
+    background-color                  : lighten(FORM_BORDER_COLOR, 50%)
+    > span
+      background-color                : FORM_BORDER_COLOR
+
+  &.checked
+    background-color                  : alpha(THEME, 25%)
+    > span
+      background-color                : THEME
+      right                           : 0
+      box-shadow                      : ZDEPTH_SHADOW_2
+    > [data-component-ripple]
+      left                            : 0
+      background-color                : alpha(THEME, 15%)

spec/components/switch.cjsx

@@ -0,0 +1,26 @@
+###
+@todo
+###
+
+Switch = require '../../components/switch'
+
+module.exports = React.createClass
+
+  # -- Events
+  onChange: (event, instance) ->
+   console.log "[SWITCH]", instance.getValue()
+
+  # -- Render
+  render: ->
+    <section>
+      <h2>Switches</h2>
+
+      <p>Default</p>
+      <Switch />
+
+      <p>With properties</p>
+      <Switch value={true} label="Online" onChange={@onChange} />
+
+      <p>Disabled</p>
+      <Switch disabled/>
+    </section>

spec/index.cjsx

@@ -8,6 +8,7 @@ Dialog        = require './components/dialog'
 Dropdown      = require './components/dropdown'
 Form          = require './components/form'
 Progress      = require './components/progress'
+Switch        = require './components/switch'
 
 # React           = require('react/addons')
 # TestUtils       = React.addons.TestUtils
@@ -25,12 +26,13 @@ Test = React.createClass
     <app data-toolbox={true}>
       <h1>React-Kit <small>New way for create</small></h1>
 
-      <Form />
+      <Switch />
       <Aside />
       <Autocomplete />
       <Button />
       <Dialog />
       <Dropdown />
+      <Form />
       <Progress />
     </app>