Added support for TextArea.

NOTE:  macOS CSS was funky, and could not fully shrink bottom border.  It's close, but I think somebody with more CSS understanding should review the playground and see if there's a better solution.

examples/macOs/components/textArea.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import { TextArea } from 'react-desktop/macOs';
+
+export default class extends Component {
+  handleChange = e => console.log(e.target.value);
+
+  render() {
+    return (
+      <TextArea
+        label="My Input"
+        placeholder="My Input"
+        defaultValue=""
+        rows={5}
+        cols={80}
+        onChange={this.handleChange}
+      />
+    );
+  }
+}

examples/windows/components/textArea.js

@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import { TextArea } from 'react-desktop/windows';
+
+export default class extends Component {
+  static defaultProps = {
+    color: '#cc7f29',
+    theme: 'light'
+  };
+
+  handleChange = e => console.log(e.target.value);
+
+  render() {
+    return (
+      <TextArea
+        theme={this.props.theme}
+        color={this.props.color}
+        background
+        label="My Input"
+        placeholder="My Input"
+        rows={5}
+        cols={80}
+        onChange={this.handleChange}
+      />
+    );
+  }
+}

macOs.js

@@ -21,6 +21,7 @@ export {
 } from './src/SegmentedControl/macOs/Item';
 export { default as Text } from './src/Text/macOs';
 export { default as TextInput } from './src/TextInput/macOs';
+export { default as TextArea } from './src/TextArea/macOs';
 export { default as TitleBar } from './src/TitleBar/macOs';
 export { default as Toolbar } from './src/Toolbar/macOs';
 export { default as ToolbarNav } from './src/Toolbar/macOs/Nav';

src/TextArea/macOs/centerPlaceholderAnimation.js

@@ -0,0 +1,65 @@
+import BezierEasing from '../../animation/bezierEasing';
+
+let requestAnimationFrame;
+if (typeof window !== 'undefined') {
+  requestAnimationFrame = window.requestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.msRequestAnimationFrame;
+}
+
+let startTimestamp;
+const duration = 350;
+const easing = BezierEasing(.3,.14,0,1);
+
+function moveLabel(timestamp, label, start, current, end, cb) {
+  if (start === end) return null;
+  if (!startTimestamp) startTimestamp = timestamp;
+  let progress = 1 - (timestamp - startTimestamp) / duration;
+  if (progress < 0) progress = 0;
+  progress = 1 - (easing.get(1 - progress));
+  if (start > end) {
+    current = progress * start;
+  } else {
+    current = (1 - progress) * end + start;
+  }
+
+  label.style.left = current + 'px';
+  if (start > end && current > end || start < end && current < end) {
+    requestAnimationFrame(timestamp => moveLabel(timestamp, label, start, current, end));
+  } else {
+    label.style.left = end + 'px';
+    if (cb) cb();
+  }
+}
+
+function animateLabel(label, start, end) {
+  return new Promise(resolve => {
+    if (requestAnimationFrame) {
+      requestAnimationFrame(timestamp => moveLabel(timestamp, label, start, start, end, resolve));
+    }
+  });
+}
+
+export function pullLeft(input, label) {
+  startTimestamp = null;
+  const start = label.offsetLeft;
+  input.style.color = 'transparent';
+  label.style.position = 'absolute';
+  setTimeout(() => {
+    animateLabel(label, start, 2);
+    setTimeout(() => input.style.color = null, 300);
+  }, 10);
+}
+
+export function pushCenter(input, label) {
+  startTimestamp = null;
+  label.style.position = 'relative';
+  const end = label.offsetLeft;
+  label.style.position = 'absolute';
+
+  setTimeout(() => {
+    animateLabel(label, 2, end)
+      .then(() => label.style.position = 'relative');
+  }, 10);
+}

src/TextArea/macOs/focusRingAnimation.js

@@ -0,0 +1,57 @@
+import { keyframes } from 'radium';
+
+export default function (borderRadius) {
+  return keyframes(
+    {
+      '0%': {
+        opacity: '0',
+        borderWidth: '34px',
+        top: '-34px',
+        left: '-34px'
+      },
+      '32%': {
+        opacity: '0',
+        borderRadius: '10px',
+        borderWidth: '30px',
+        top: '-30px',
+        left: '-30px'
+      },
+      '50%': {
+        opacity: '.2',
+        borderWidth: '15px',
+        top: '-15px',
+        left: '-15px'
+      },
+      '80%': {
+        opacity: '.4',
+        borderWidth: '9px',
+        top: '-9px',
+        left: '-9px'
+      },
+      '90%': {
+        opacity: '.9',
+        borderWidth: '6px',
+        top: '-6px',
+        left: '-6px'
+      },
+      '100%': {
+        opacity: '1',
+        ...(
+          borderRadius ? {
+            top: '-2px',
+            left: '-2px',
+            borderRadius: (parseInt(borderRadius) + 2) + 'px',
+            borderWidth: '2px',
+            boxShadow: '0 0 1px 0px rgba(125, 195, 242, .7)'
+          } : {
+            top: '-3px',
+            left: '-3px',
+            borderRadius: '4px',
+            borderWidth: '3px'
+          }
+        )
+      }
+    },
+    'text-input-focus'
+  );
+}