Added text form

src/components/Surface.tsx

@@ -2,29 +2,19 @@ import React, { FC } from 'react'
 /** @jsx jsx */
 import { jsx, css } from '@emotion/core'
 
-import { getColor, getMeasure } from '../helpers'
 import { useTheme } from '../hooks'
 import { Flexible } from './Flexible'
+import { useLifting } from '../hooks/useLifting'
 
 interface Props extends FlexibleType, Liftable {}
 
-const getZIndex = (lifting?: Measure) =>
-  lifting ? getMeasure(lifting!, [1, 2, 3, 4]) : 0
-
-const getAlpha = (lifting?: Measure) =>
-  lifting ? getMeasure(lifting!, [0.05, 0.1, 0.15, 0.2]) : 0
-
 /**
  * TODO: Separate margin and padding into constants.
  */
 const Surface: FC<Props> = ({ lifting, children, ...rest }) => {
-  const { colors, elements } = useTheme()
+  const { elements } = useTheme()
+  const { zIndex, bgColor, color } = useLifting(lifting)
 
-  const zIndex = getZIndex(lifting)
-  const bgColor = lifting
-    ? getColor(colors.contrast, getAlpha(lifting))
-    : getColor(colors.substratum)
-  const color = getColor(colors.contrast)
   const borderRadius = elements.roundness
 
   return (

src/components/TextInput.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core'
+
+import { useLifting } from '../hooks/useLifting'
+import { useTheme } from '../hooks'
+
+interface Props extends NativeInputType {
+  type:
+    | 'text'
+    | 'email'
+    | 'url'
+    | 'search'
+    | 'tel'
+    | 'password'
+    | 'number'
+    | 'date'
+    | 'color'
+    | 'file'
+}
+
+const TextInput: React.FC<Props> = ({ type, size, ...rest }) => {
+  const { zIndex, bgColor, color } = useLifting('xl')
+  const { elements } = useTheme()
+
+  const borderRadius = elements.roundness
+  return (
+    <input
+      css={css`
+        z-index: ${zIndex};
+        background-color: ${bgColor};
+        color: ${color};
+        border-radius: ${borderRadius};
+        padding: 0.5rem 1.5rem 0.5rem 1.5rem;
+        margin: 0.5rem;
+        border: none;
+        :focus {
+          outline: none;
+        }
+      `}
+      type={type}
+    />
+  )
+}
+
+export { TextInput }

src/components/index.ts

@@ -12,6 +12,7 @@ import { Paragraph } from './Paragraph'
 import { DarksideTheme } from './DarksideTheme'
 import { GlobalStyles } from './GobalStyles'
 import { Icon } from './Icon'
+import { TextInput } from './TextInput'
 
 export {
   Icon,
@@ -28,4 +29,5 @@ export {
   Paragraph,
   DarksideTheme,
   GlobalStyles,
+  TextInput,
 }

src/docs/Forms.mdx

@@ -0,0 +1,25 @@
+---
+## name: Forms
+---
+
+import { Playground } from 'docz'
+
+import { TextInput, Surface } from '../index'
+
+# Forms
+
+## Text
+
+<Playground>
+  <Surface wrap="wrap" direction="column">
+    <TextInput type="text" />
+    <TextInput type="email" />
+    <TextInput type="search" />
+    <TextInput type="tel" />
+    <TextInput type="password" />
+    <TextInput type="number" />
+    <TextInput type="date" />
+    <TextInput type="color" />
+    <TextInput type="file" />
+  </Surface>
+</Playground>

src/hooks/useLifting.ts

@@ -0,0 +1,27 @@
+import React from 'react'
+import { useTheme } from './useTheme'
+import { getMeasure, getColor } from '../helpers'
+
+const useLifting = (lifting?: Measure) => {
+  const { colors } = useTheme()
+
+  const getZIndex = (lifting?: Measure) =>
+    lifting ? getMeasure(lifting!, [1, 2, 3, 4]) : 0
+
+  const getAlpha = (lifting?: Measure) =>
+    lifting ? getMeasure(lifting!, [0.05, 0.1, 0.15, 0.2]) : 0
+
+  const zIndex = getZIndex(lifting)
+  const bgColor = lifting
+    ? getColor(colors.contrast, getAlpha(lifting))
+    : getColor(colors.substratum)
+  const color = getColor(colors.contrast)
+
+  return {
+    zIndex,
+    color,
+    bgColor,
+  }
+}
+
+export { useLifting }

src/typings.d.ts

@@ -21,6 +21,11 @@ type NativeImgType = React.DetailedHTMLProps<
   HTMLImageElement
 >
 
+type NativeInputType = React.DetailedHTMLProps<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  HTMLInputElement
+>
+
 /**
  * Represent a color on RGB system
  */