// Access components individually for smaller build files (RECOMMENDED)
import Appbar from 'preact-mui/lib/appbar';
import Button from 'preact-mui/lib/button';
import Container from 'preact-mui/lib/container';

// Access all components from preact-mui module
import { Appbar, Button, Container } from 'preact-mui';

// Preact-MUI also supports ES5 syntax
var preactMui = require('preact-mui');
var Appbar = preactMui.Appbar;
var Button = preactMui.Button;
var Container = preactMui.Container;

import {h, Component, render} from 'preact';

import Appbar from 'preact-mui/lib/appbar';
import Button from 'preact-mui/lib/button';
import Container from 'preact-mui/lib/container';

class Example extends React.Component {
  render() {
    return (
      <div>
        <Appbar></Appbar>
        <Container fluid={true}>
          <Button color="primary">button</Button>
        </Container>
      </div>
    );
  }
}

render(<Example />, document.getElementById('example'));

import Appbar from 'preact-mui/lib/appbar';

<Appbar />

import Button from 'preact-mui/lib/button';

<Button />
  * {String} color=default|primary|danger|accent
  * {String} size=default|small|large
  * {String} type=submit|button
  * {String} variant=default|flat|raised|fab
  * {Boolean} disabled=false|true

import Checkbox from 'preact-mui/lib/checkbox';

<Checkbox />
  * {String} label
  * {String} value
  * {Boolean} checked
  * {Boolean} defaultChecked
  * {Boolean} disabled=false|true

import Container from 'preact-mui/lib/container';

<Container />
  * {Boolean} fluid=false|true

import Divider from 'preact-mui/lib/divider';

<Divider />

import Dropdown from 'preact-mui/lib/dropdown';

<Dropdown />
  * {String} label
  * {String} alignMenu=left|right
  * {String} color=default|primary|danger|accent
  * {String} size=default|small|large
  * {String} variant=default|flat|raised|fab
  * {Boolean} disabled

import DropdownItem from 'preact-mui/lib/dropdown-item';

<DropdownItem />
  * {String} link

import Form from 'preact-mui/lib/form';

<Form />
  * {Boolean} inline=false|true
  * {Boolean} legend=false|true

import Row from 'preact-mui/lib/row';

<Row />

import Col from 'preact-mui/lib/col';

<Col />
  * {Integer} xs
  * {Integer} xs-offset
  * {Integer} sm
  * {Integer} sm-offset
  * {Integer} md
  * {Integer} md-offset
  * {Integer} lg
  * {Integer} lg-offset
  * {Integer} xl
  * {Integer} xl-offset

import Input from 'preact-mui/lib/input';

<Input />
  * {String} defaultValue
  * {String} hint
  * {String} value
  * {Boolean} floatingLabel
  * {String|Object} style
  * {String} type=text|email|url|tel|password

import Panel from 'preact-mui/lib/panel';

<Panel />

import Radio from 'preact-mui/lib/panel';

<Radio />
  * {String} name
  * {String} value
  * {String} label
  * {Boolean} checked
  * {Boolean} defaultChecked
  * {Boolean} disabled=false|true

import Select from 'preact-mui/lib/select';

<Select />
  * {String} defaultValue
  * {String} label
  * {String|Object} style
  * {Boolean} disabled=false|true

import Option from 'preact-mui/lib/option';

<Option />
  * {String} value
  * {String} label

import Tabs from 'preact-mui/lib/tabs';

<Tabs />
  * {Boolean} justified=false|true

import Tab from 'preact-mui/lib/tab';

<Tab />
  * {Boolean} selected
  * {String} label
  * {String} value

import Textarea from 'preact-mui/lib/textarea';

<Textarea />
  * {String} defaultValue
  * {String} hint
  * {String} value
  * {Boolean} floatingLabel
  * {String} label
  * {String|Object} style

import {h, Component, render} from 'preact';
import Appbar from 'preact-mui/lib/appbar';
import Button from 'preact-mui/lib/button';
import Container from 'preact-mui/lib/container';
import Modal from 'preact-mui/lib/modal'

/**
 * @class Modal
 *
 * @param { string } openedBy The element Id that when clicked, 
 * will open the modal
 *
 * @param { string } closedBy The element Id that when clicked, 
 * will close the modal
 *
 * @param { function } onClose The hanlder that will trigger, 
 * when you close the Modal
 *
 * @param { string } position The position of container modal.
 * Can be: center, centerLeft, centerRight, centerTop, centerBottom
 * If you set some of these positions, the modal will appear on this position
 */
class Example extends React.Component {
  render() {
    return (
      <div>
        <Appbar></Appbar>
        <Container fluid={true}>
          <Modal 
            openedBy="buttonModal"
            closedBy="buttonClose"
            onClose={ 
              () => { 
                console.log('Modal Closed.')
              }
            }>
            <h1>I am a children of Modal Component</h1>
            <Button id="buttonClose">Close Modal</Button>
          </Modal>
          <Button color="primary" id="buttonModal">Open Modal</Button>
        </Container>
      </div>
    );
  }
}

render(<Example />, document.getElementById('example'));