✨ Add Input

Author: exah

.internal/theme.js

@@ -13,6 +13,11 @@ const Button = css`
   padding: 10px 20px;
 `
 
+const Input = css`
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  padding: 10px 20px;
+`
+
 const theme = {
   media: {
     sm: '(max-width: 600px)',
@@ -79,6 +84,12 @@ const theme = {
       background: 'royalblue',
       color: 'white'
     }
+  },
+  Input,
+  inputStyle: {
+    default: {
+      background: '#2e3440',
+    }
   }
 }
 

docs/input.mdx

@@ -0,0 +1,43 @@
+---
+name: Input
+route: /input
+menu: Primitives
+---
+
+import { Playground } from 'docz'
+import { ThemeProvider } from 'emotion-theming'
+import { PropsTable } from '../.internal/props-table'
+import { theme } from '../.internal/theme'
+import { Input, Link } from '../src'
+
+# Input
+
+## Description
+
+Based on [Box](/box). Renders `<input>` or `<textarea>` element.
+
+
+## Usage
+
+```js
+import { Input } from 'pss-components'
+```
+
+<Playground>
+  <Input defaultValue='Input' />
+  <Input defaultValue='Input' variant='auto' mt={1} />
+  <Input defaultValue='Input' bg='red' mt={1} />
+</Playground>
+
+## Examples
+
+### Change element
+
+<Playground>
+  <Input as='textarea' defaultValue='TextArea' variant='auto' rows={3} />
+</Playground>
+
+
+## Props
+
+<PropsTable of={Input} />

src/button.js

@@ -3,7 +3,7 @@ import { themePath, variant } from 'pss'
 import { getPropTypes } from 'pss/prop-type'
 import { Box } from './box'
 
-const buttonVariant = variant({
+const buttonStyle = variant({
   themeKey: 'buttonStyle'
 })
 
@@ -19,13 +19,13 @@ const Button = styled(Box)(
     }
   },
   themePath('Button'),
-  buttonVariant
+  buttonStyle
 )
 
 Button.displayName = 'Button'
 
 Button.propTypes = {
-  ...getPropTypes(buttonVariant),
+  ...getPropTypes(buttonStyle),
   ...Box.propTypes
 }
 

src/index.js

@@ -4,6 +4,7 @@ export { Feed } from './feed'
 export { Flex } from './flex'
 export { FlexGrid } from './flex-grid'
 export { Grid } from './grid'
+export { Input } from './input'
 export { Image } from './image'
 export { Layout } from './layout'
 export { Link } from './link'

src/input.js

@@ -0,0 +1,37 @@
+import styled from '@emotion/styled'
+import { themePath, variant } from 'pss'
+import { getPropTypes } from 'pss/prop-type'
+import { Box } from './box'
+
+const inputStyle = variant({
+  themeKey: 'inputStyle'
+})
+
+const Input = styled(Box)(
+  {
+    appearance: 'none',
+    '&[disabled]': {
+      '-webkit-text-fill-color': 'currentColor',
+      '-webkit-opacity': 1
+    }
+  },
+  themePath('Input'),
+  inputStyle
+)
+
+Input.displayName = 'Input'
+
+Input.propTypes = {
+  ...getPropTypes(inputStyle),
+  ...Box.propTypes
+}
+
+Input.defaultProps = {
+  as: 'input',
+  width: '100%',
+  borderRadius: 0
+}
+
+export {
+  Input
+}