smbls 0.9.3 → 0.9.6

package/package.json

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

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
+    propStyle: ({ props }) => props && props.style
   }
 }
 

package/src/Button.js

@@ -2,25 +2,30 @@
 
 import { IconText } from '.'
 
-const css = {
+const style = {
   appearance: 'none',
   border: 'none',
   outline: 0,
   cursor: 'pointer',
-  fontFamily: 'inherit'
+  fontFamily: 'default'
 }
 
 export const Button = {
   proto: IconText,
   tag: 'button',
   props: {
+    fontSize: 'A',
     type: 'button',
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
     textDecoration: 'none',
+    lineHeight: '1',
+    whiteSpace: 'nowrap',
+    padding: 'Z A1',
+    fontFamily: 'inherit',
     round: 'C2',
-    css
+    style
   },
   attr: {
     type: ({ props }) => props.type
@@ -36,7 +41,7 @@ export const SquareButton = {
     aspectRatio: '1 / 1',
     justifyContent: 'center',
     round: 'Z',
-    css: { boxSizing: 'content-box' }
+    style: { boxSizing: 'content-box' }
   }
 }
 
@@ -47,7 +52,7 @@ export const CircleButton = {
 
 export const KangorooButton = {
   tag: 'button',
-  props: { css },
+  props: { style },
 
   iconText: { proto: IconText },
   child: { proto: IconText }

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