diff --git a/components/aside/index.cjsx b/components/aside/index.cjsx
new file mode 100644
index 00000000..f9d353b3
--- /dev/null
+++ b/components/aside/index.cjsx
@@ -0,0 +1,45 @@
+###
+@todo
+###
+
+Style = require './style'
+
+module.exports = React.createClass
+
+ # -- States & Properties
+ propTypes:
+ type : React.PropTypes.string.required
+ active : React.PropTypes.bool
+ hideable : React.PropTypes.bool
+ className : React.PropTypes.string
+
+ getDefaultProps: ->
+ type : "left"
+ active : false
+ hideable : false
+ className : ""
+
+ getInitialState: ->
+ active : @props.active
+
+ # -- Events
+ onClick: (event) ->
+ @setState active: false if event.target is @getDOMNode()
+
+ # -- Render
+ render: ->
+ className = @props.className
+ className += " active" if @state.active
+ className += " hideable" if @props.hideable
+
+
+ # -- Extends
+ show: ->
+ @setState active: true
+
+ hide: ->
+ @setState active: false
diff --git a/components/aside/style.styl b/components/aside/style.styl
new file mode 100644
index 00000000..c6cbb6d0
--- /dev/null
+++ b/components/aside/style.styl
@@ -0,0 +1,49 @@
+@import "../constants"
+
+[data-component-aside]
+ position : absolute
+ z-index : 2
+ top : 0
+ width : 100vw
+ height : 100vh
+ pointer-events : none
+ transition-property background-color
+ transition-duration ANIMATION_DURATION
+ transition-timing-function ANIMATION_EASE
+
+ // -- Children
+ > *
+ position : absolute
+ top : 0
+ height : 100%
+ width : (4 * UNIT)
+ background-color : WHITE
+ transition-property transform
+ transition-duration ANIMATION_DURATION
+ transition-timing-function ANIMATION_EASE
+
+ // -- Style
+ &.active
+ pointer-events : all
+ > *
+ box-shadow : ZDEPTH_SHADOW_1
+ transform translateX(0%)
+ &:not(.hideable)
+ z-index : 2
+ width : (4 * UNIT)
+ &.hideable
+ z-index : 3
+ &.active
+ background-color : rgba(0,0,0,0.5)
+
+[data-component-aside="left"]
+ left : 0
+ > *
+ left : 0
+ transform translateX(-100%)
+
+[data-component-aside="right"]
+ right : 0
+ > *
+ right : 0
+ transform translateX(100%)
diff --git a/components/constants.styl b/components/constants.styl
new file mode 100644
index 00000000..16f5dcaa
--- /dev/null
+++ b/components/constants.styl
@@ -0,0 +1,42 @@
+// -- Colors
+COLOR = #222222
+BACKGROUND = #f5f5f5
+THEME = #cccccc
+WHITE = #ffffff
+PRIMARY = #e91e63
+SECONDARY = #00bcd4
+// THEME = #ef6c00
+CANCEL = red
+
+// -- Fonts
+FONT_FAMILY = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"
+FONT_SIZE = 16px
+FONT_SIZE_TINY = 80%
+FONT_SIZE_SMALL = 90%
+FONT_SIZE_NORMAL = 100%
+FONT_SIZE_BIG = 120%
+FONT_WEIGHT_THIN = 300
+FONT_WEIGHT_NORMAL = 400
+FONT_WEIGHT_BOLD = 700
+
+// -- Sizes
+UNIT = 4rem
+SPACE = (UNIT * 0.29)
+OFFSET = (SPACE * 1.75)
+MENU_WIDTH = (3.85 * UNIT)
+HEADER_HEIGHT = (1.65 * UNIT)
+BUTTON_HEIGHT = (2.5 * SPACE)
+BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE)
+LOADING_HEIGHT = (1.5 * UNIT)
+
+// -- Shadows
+ZDEPTH_SHADOW_1 = 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24)
+ZDEPTH_SHADOW_2 = 0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23)
+ZDEPTH_SHADOW_3 = 0 10px 30px rgba(0,0,0,0.19), 0 6px 10px rgba(0,0,0,0.23)
+ZDEPTH_SHADOW_4 = 0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22)
+ZDEPTH_SHADOW_5 = 0 19px 60px rgba(0,0,0,0.30), 0 15px 20px rgba(0,0,0,0.22)
+
+// -- Animations
+ANIMATION_DURATION = 450ms
+ANIMATION_EASE = cubic-bezier(.55,0,.1,1)
+ANIMATION_DELAY = (ANIMATION_DURATION / 5)
diff --git a/spec/components/aside.cjsx b/spec/components/aside.cjsx
new file mode 100644
index 00000000..08ec9935
--- /dev/null
+++ b/spec/components/aside.cjsx
@@ -0,0 +1,28 @@
+###
+@todo
+###
+
+Aside = require '../../components/aside'
+Button = require '../../components/button'
+
+module.exports = React.createClass
+
+ # -- States & Properties
+
+ # -- Events
+ onClick: (ref, method) ->
+ @refs[ref][method]()
+
+ # -- Render
+ render: ->
+
diff --git a/spec/index.cjsx b/spec/index.cjsx
index 06c087a7..7d623419 100644
--- a/spec/index.cjsx
+++ b/spec/index.cjsx
@@ -1,107 +1,15 @@
"use strict"
# -- Components
-Autocomplete = require "../components/autocomplete"
-Button = require "../components/button"
-Form = require "../components/form"
-
-Dialog = require './examples/dialog'
+Aside = require './components/aside'
Test = React.createClass
- getInitialState: ->
- submitable : false
-
- onInputChange: (event, input) ->
- console.log "onInputChange -> #{input.getValue()}"
-
- onFormValid: (event, form) ->
- console.log "onFormValid", form.getValue()
- @setState submitable: true
-
- onFormError: (event, form) ->
- console.log "onFormError", form.getValue()
- @setState submitable: false
-
- onButtonClick: (event, button) ->
- console.log "onButtonClick", button
-
- onShowDialog: ->
- console.log "onShowDialog"
- @refs.dialog.show()
-
- onAutocompleteValues: ->
- console.log @refs.autocomplete_multiple.getValue()
- console.log @refs.autocomplete_simple.getValue()
-
# -- Render
render: ->
- attributes = [
- ref: "name", label: "Your Name", required: true#, onChange: @onInputChange
- ,
- ref: "description", multiline: true, label: "Description", value: "Doer"
- ,
- ref: "birthdate", type: "date", label: "Birthdate"
- ,
- ref: "years", type: "number", label: "Years"
- ,
- ref: "twitter", label: "Nickname", disabled: true
- ,
- ref: "nomad", type: "checkbox", label: "Are you a nomad?", value: true
- ,
- ref: "cow", type: "checkbox", label: "Are you a cow?", value: false
- ,
- ref: "girl", type: "checkbox", label: "Are you a girl?", value: false, disabled: true
- ,
- ref: "nomad_2", type: "radio", label: "Are you a nomad_2?", value: true
- ,
- ref: "cow_2", type: "radio", label: "Are you a cow_2?", value: false
- ,
- ref: "girl_2", type: "radio", label: "Are you a girl_2?", value: false, disabled: true
- ,
- type: "submit", caption: "Send", style: "primary anchor", disabled: true
- ]
- attributes = []
-
- countries = ["Spain", "England", "USA", "Thailand", "Tongo", "Slovenia"]
- countries_selected = ["USA", "Tongo"]
- countries_obj =
- "ES-es" : "Spain"
- "TH-th" : "Thailand"
- "EN-gb" : "England"
- "EN-en" : "USA"
- countries_obj_selected = "TH-th"
-
-
+
React-Kit New way for create
-
- Autocomplete
-
-
-
-
- Forms
-
-
-
- Buttons
-
+
+
React.render , document.body