smbls 0.9.1 → 0.9.4

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.9.1",
+  "version": "0.9.4",
   "repository": "https://github.com/symbo-ls/smbls",
   "main": "src/index.js",
   "files": [

package/src/Block.js

@@ -79,6 +79,15 @@ export const Block = {
     gap: ({ props }) => props.gap ? mapBasedOnRatio(props, 'gap') : null,
     gridArea: ({ props }) => props.gridArea && ({ gridArea: props.gridArea }),
 
+    flex: ({ props }) => props.flex && ({ flex: props.flex }),
+    alignItems: ({ props }) => props.alignItems && ({ alignItems: props.alignItems }),
+    alignContent: ({ props }) => props.alignContent && ({ alignContent: props.alignContent }),
+    justifyContent: ({ props }) => props.justifyContent && ({ justifyContent: props.justifyContent }),
+
+    flexWrap: ({ props }) => props.flexWrap && ({
+      display: 'flex',
+      flexFlow: props.flexWrap
+    }),
     flexFlow: ({ props }) => props.flexFlow && ({
       display: 'flex',
       flexFlow: props.flexFlow
@@ -93,11 +102,6 @@ export const Block = {
       }
     },
 
-    flex: ({ props }) => props.flex && ({ flex: props.flex }),
-    alignItems: ({ props }) => props.alignItems && ({ alignItems: props.alignItems }),
-    alignContent: ({ props }) => props.alignContent && ({ alignContent: props.alignContent }),
-    justifyContent: ({ props }) => props.justifyContent && ({ justifyContent: props.justifyContent }),
-
     gridColumn: ({ props }) => props.gridColumn && ({ gridColumn: props.gridColumn }),
     gridRow: ({ props }) => props.gridRow && ({ gridRow: props.gridRow }),
 

package/src/Box.js

@@ -4,7 +4,7 @@ import { Shape, Position, Theme, Block, Text, Overflow, Transition, Transform, R
 
 const PropsCSS = {
   class: {
-    propsCSS: ({ props }) => props && props.css
+    style: ({ props }) => props && props.style
   }
 }
 

package/src/Button.js

@@ -2,7 +2,7 @@
 
 import { IconText } from '.'
 
-const css = {
+const style = {
   appearance: 'none',
   border: 'none',
   outline: 0,
@@ -14,12 +14,17 @@ export const Button = {
   proto: IconText,
   tag: 'button',
   props: {
+    fontSize: 'A',
     type: 'button',
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
     textDecoration: 'none',
-    css
+    lineHeight: '1',
+    whiteSpace: 'nowrap',
+    padding: 'Z A1',
+    round: 'C2',
+    style
   },
   attr: {
     type: ({ props }) => props.type
@@ -35,7 +40,7 @@ export const SquareButton = {
     aspectRatio: '1 / 1',
     justifyContent: 'center',
     round: 'Z',
-    css: { boxSizing: 'content-box' }
+    style: { boxSizing: 'content-box' }
   }
 }
 
@@ -46,7 +51,7 @@ export const CircleButton = {
 
 export const KangorooButton = {
   tag: 'button',
-  props: { css },
+  props: { style },
 
   iconText: { proto: IconText },
   child: { proto: IconText }

package/src/DatePicker/index.js

@@ -2,7 +2,7 @@
 
 import style from './style'
 
-import Icon from '../Icon'
+import { Icon } from '../Icon'
 
 export const DatePicker = {
   style,

package/src/Field.js

@@ -15,7 +15,7 @@ export const Field = {
     position: 'relative',
     width: '16em',
 
-    css: {
+    style: {
       appearance: 'none',
       outline: 0,
       border: 'none',

package/src/Flex.js

@@ -12,6 +12,7 @@ export const Flex = {
     flow: ({ props }) => props.flow && ({ flexFlow: props.flow }),
     flexDirection: ({ props }) => props.flexDirection && ({ flexDirection: props.flexDirection }),
     alignItems: ({ props }) => props.alignItems && ({ alignItems: props.alignItems }),
+    wrap: ({ props }) => props.wrap && ({ wrap: props.wrap }),
     alignContent: ({ props }) => props.alignContent && ({ alignContent: props.alignContent }),
     justifyContent: ({ props }) => props.justifyContent && ({ justifyContent: props.justifyContent }),
     gap: ({ props }) => props.gap && mapBasedOnRatio(props, 'gap'),

package/src/Icon.js

@@ -20,7 +20,7 @@ export const Icon = {
       height: 'A',
       display: 'inline-block',
       src: iconFromLibrary,
-      css: { fill: 'currentColor' }
+      style: { fill: 'currentColor' }
     }
   },
   attr: { viewBox: '0 0 24 24' }

package/src/SVG.js

@@ -6,7 +6,7 @@ const useSVGSymbol = file => `<use xlink:href="${file}" />`
 export const SVG = {
   tag: 'svg',
   props: {
-    css: { '*': { fill: 'currentColor' } }
+    style: { '*': { fill: 'currentColor' } }
   },
   attr: {
     xmlns: 'http://www.w3.org/2000/svg',

package/src/Select.js

@@ -5,7 +5,7 @@ export const Select = {
 
   props: {
     fontSize: 'A',
-    css: {
+    style: {
       border: 'none',
       boxSizing: 'border-box',
       cursor: 'pointer'

package/src/Shape/style.js

@@ -17,13 +17,13 @@ export const SHAPES = {
   bubble: {},
 
   tooltip: ({ props }) => ({
-    position: 'relative',
+    position: props.position || 'relative',
     '&:before': {
       content: '""',
       display: 'block',
       width: '0px',
       height: '0px',
-      border: `6px solid ${getColor(props.background) || (props.theme && getTheme(props.theme).backgroundColor)}`,
+      border: `6px solid ${getColor(props.background) || (props.theme && getTheme(props.theme).background)}`,
       position: 'absolute',
       borderRadius: '2px'
     }

package/src/Text.js

@@ -14,6 +14,7 @@ export const Text = {
     // lineHeight: ({ props }) => props.lineHeight && mapBasedOnRatio(props, 'lineHeight', null, ''),
     textDecoration: ({ props }) => props.textDecoration && ({ textDecoration: props.textDecoration }),
     textTransform: ({ props }) => props.textTransform && ({ textTransform: props.textTransform }),
+    whiteSpace: ({ props }) => props.whiteSpace && ({ whiteSpace: props.whiteSpace }),
     textAlign: ({ props }) => props.textAlign && ({ textAlign: props.textAlign }),
     fontWeight: ({ props }) => props.fontWeight && ({ fontWeight: props.fontWeight })
   }

package/src/Transition.js

@@ -1,8 +1,26 @@
 'use strict'
 
+import { mapTiming } from '@symbo.ls/scratch'
+
+const diffTransition = (transition, key = 'transition') => {
+  const arr = transition.split(' ')
+
+  if (!arr.length) return { transition: props.transition }
+
+  return {
+    transition: arr.map(v => {
+      if (v.length < 3 || v.includes('ms')) {
+        const mapWithSequence = mapTiming(v)
+        return mapWithSequence.duration
+      }
+      return v
+    }).join(' ')
+  }
+}
+
 export const Transition = {
   class: {
-    transition: ({ props }) => props.transition && ({ transition: props.transition }),
+    transition: ({ props }) => props.transition && diffTransition(props.transition),
     transitionProperty: ({ props }) => props.transitionProperty && ({
       transitionProperty: props.transitionProperty,
       willChange: props.transitionProperty