Added Box

src/components/Button.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 
 import { getMeasure } from '../helpers'
 import { Loader } from './Loader'
-import { Clickable } from './core/Clickable'
+import Clickable from './core/Clickable'
 
 const getFontSize = (measure: Measure): number =>
   getMeasure(measure, [0.8, 1, 1.25, 1.5])

src/components/Form.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { Flexible } from '.'
+import Flexible, { FlexibleProps } from './core/Flexible'
 
 interface Props extends NativeFormType {
-  flex: FlexibleType
+  flex: FlexibleProps
 }
 
 const Form: React.FC<Props> = ({ flex, children, ...props }) => {

src/components/FormGroup.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import { Flexible } from './core/Flexible'
+import Flexible, { FlexibleProps } from './core/Flexible'
 
 const StyledFlexible = styled(Flexible)`
   padding: 0.5rem;
 `
 
-const FormGroup: React.FC<FlexibleType> = props => {
+const FormGroup: React.FC<FlexibleProps> = props => {
   return <StyledFlexible {...props} />
 }
 

src/components/IconButton.tsx

@@ -1,8 +1,9 @@
 import React, { FC } from 'react'
 
-import { Clickable, Icon } from '../index'
+import { Icon } from './Icon'
+import Clickable, { ClickableProps } from './core/Clickable'
 
-interface Props extends ClickableType {
+interface Props extends ClickableProps {
   icon: IconType
 }
 

src/components/Surface.tsx

@@ -2,10 +2,10 @@ import React, { FC } from 'react'
 import styled from 'styled-components'
 
 import { useTheme } from '../hooks'
-import { Flexible } from './core/Flexible'
+import Flexible, { FlexibleProps } from './core/Flexible'
 import { useLifting } from '../hooks/useLifting'
 
-interface Props extends FlexibleType, Liftable {}
+interface Props extends FlexibleProps, Liftable {}
 
 const StyledFlexible = styled(Flexible)<any>(props => ({
   zIndex: props.zIndex,

src/components/Tab.tsx

@@ -1,14 +1,13 @@
 import React, { FC, useContext } from 'react'
 
 import { TabsContext } from '../context/TabsContext'
-import { Clickable } from './core/Clickable'
+import Clickable from './core/Clickable'
 
 const Tab: FC<TabProps> = ({ id, label }) => {
   const { activeTab, onTabClick } = useContext(TabsContext)
   const handleClick = () => {
     onTabClick(id)
   }
-  const isActive = activeTab === id
 
   return <Clickable onClick={handleClick}>{label}</Clickable>
 }

src/components/core/Box.tsx

@@ -0,0 +1,7 @@
+import styled from 'styled-components'
+
+const Box = styled.div<any>`
+  box-sizing: border-box;
+`
+
+export default Box

src/components/core/Clickable.tsx

@@ -1,25 +1,26 @@
 import React from 'react'
 import styled from 'styled-components'
+import Box from './Box'
 
-const StyledButton = styled.button<any>`
+const StyledBox = styled(Box)<any>`
   ${({ full, disabled }) => `
     display: ${full ? 'block' : 'relative'};
     width: ${full ? '100%' : 'auto'};
     cursor: ${disabled ? 'not-allowed' : 'pointer'};
   `};
   border: none;
-  box-sizing: border-box;
   overflow: hidden;
   text-decoration: none;
   appearance: none;
   user-select: none;
   background: transparent;
 `
 
-const Clickable: React.FC<ClickableType> = ({
+const Clickable: React.FC<ClickableProps> = ({
   full,
   disabled,
   onClick,
+  as,
   ...rest
 }) => {
   const handleClickEvent = (
@@ -30,7 +31,8 @@ const Clickable: React.FC<ClickableType> = ({
   }
 
   return (
-    <StyledButton
+    <StyledBox
+      as={as}
       full={full}
       disabled={disabled}
       onClick={handleClickEvent}
@@ -41,6 +43,12 @@ const Clickable: React.FC<ClickableType> = ({
 
 Clickable.defaultProps = {
   full: false,
+  as: 'button',
 }
 
-export { Clickable }
+export interface ClickableProps extends NativeButtonType {
+  full?: boolean
+  as?: any
+}
+
+export default Clickable

src/components/core/Flexible.tsx

@@ -1,8 +1,7 @@
 import styled from 'styled-components'
+import Box from './Box'
 
-interface Props extends NativeDivType, FlexibleType {}
-
-const Flexible = styled.div<Props>(props => ({
+const Flexible = styled(Box)<FlexibleProps>(props => ({
   width: props.width,
   height: props.height,
   order: props.order,
@@ -34,4 +33,45 @@ Flexible.defaultProps = {
   content: 'stretch',
 }
 
-export { Flexible }
+export interface FlexibleProps {
+  /** width in percentage or px */
+  width?: string
+  /** height in percentage or px */
+  height?: string
+  /** element order */
+  order?: number
+  /** element grow */
+  grow?: number
+  /** element shrink */
+  shrink?: number
+  /** flex-basis */
+  basis?: 'auto' | number
+  /** align-self */
+  self?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
+  /** if is inline-flex */
+  inline?: boolean
+  /** flex-direction */
+  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse'
+  /** flex-wrap */
+  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse'
+  /** justify-content */
+  justify?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly'
+  /** align-items */
+  items?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
+  /** align-content */
+  content?:
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'stretch'
+}
+
+export default Flexible

src/components/index.ts

@@ -1,8 +1,8 @@
 import { Button } from './Button'
 import { IconButton } from './IconButton'
 import { Emoji } from './Emoji'
-import { Clickable } from './core/Clickable'
-import { Flexible } from './core/Flexible'
+import Clickable from './core/Clickable'
+import Flexible from './core/Flexible'
 import { Loader } from './Loader'
 import { Surface } from './Surface'
 import { Tabs } from './Tabs'

src/typings/typings.d.ts

@@ -83,51 +83,6 @@ interface Liftable {
   lifting?: Measure
 }
 
-interface FlexibleType {
-  /** width in percentage or px */
-  width?: string
-  /** height in percentage or px */
-  height?: string
-  /** element order */
-  order?: number
-  /** element grow */
-  grow?: number
-  /** element shrink */
-  shrink?: number
-  /** flex-basis */
-  basis?: 'auto' | number
-  /** align-self */
-  self?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
-  /** if is inline-flex */
-  inline?: boolean
-  /** flex-direction */
-  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse'
-  /** flex-wrap */
-  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse'
-  /** justify-content */
-  justify?:
-    | 'flex-start'
-    | 'flex-end'
-    | 'center'
-    | 'space-between'
-    | 'space-around'
-    | 'space-evenly'
-  /** align-items */
-  items?: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
-  /** align-content */
-  content?:
-    | 'flex-start'
-    | 'flex-end'
-    | 'center'
-    | 'space-between'
-    | 'space-around'
-    | 'stretch'
-}
-
-interface ClickableType extends NativeButtonType {
-  full?: boolean
-}
-
 interface TabsContext {
   activeTab: tabID
   onTabClick: Function