smbls 0.14.3 → 0.14.5

package/package.json

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

package/src/Box.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Shape, Position, Theme, Block, Text, Overflow, Transition, Transform, Responsive, Interaction, XYZ } from '.'
+import { Shape, Position, Theme, Block, Text, Overflow, Timing, Transform, Responsive, Interaction, XYZ } from '.'
 
 const PropsCSS = {
   class: {
@@ -9,5 +9,5 @@ const PropsCSS = {
 }
 
 export const Box = {
-  extend: [Shape, Position, Theme, Block, Text, Overflow, Transition, Transform, Responsive, PropsCSS, Interaction, XYZ]
+  extend: [Shape, Position, Theme, Block, Text, Overflow, Timing, Transform, Responsive, PropsCSS, Interaction, XYZ]
 }

package/src/Button.js

@@ -1,17 +1,19 @@
 'use strict'
 
-import { IconText } from '.'
+import { IconText, Focusable } from '.'
 
 const style = {
   appearance: 'none',
   border: 'none',
-  outline: 0,
   cursor: 'pointer',
-  fontFamily: 'inherit'
+  fontFamily: 'inherit',
+  '& > *': {
+    pointerEvents: 'none'
+  }
 }
 
 export const Button = {
-  extend: IconText,
+  extend: [Focusable, IconText],
   tag: 'button',
   props: {
     fontSize: 'A',
@@ -51,9 +53,39 @@ export const CircleButton = {
 }
 
 export const KangorooButton = {
-  tag: 'button',
-  props: { style },
+  extend: Button,
+
+  props: {
+    theme: 'quinary',
+    round: 'Z2',
+    padding: 'X1 X1 X1 A2',
+    size: 'A',
+    gap: 'A',
+    transition: 'A defaultBezier',
+    transitionProperty: 'background, color, opacity',
+
+    label: {
+      gap: 'X1',
+      text: 'Become PRO',
+      alignItems: 'center',
+      fontWeight: 'bold',
+      icon: {
+        name: 'star',
+        color: 'yellow'
+      }
+    },
+    child: {
+      theme: 'tertiary',
+      round: 'Z',
+      size: 'Z',
+      padding: 'Z A2',
+      text: '1 month free',
+      opacity: '.85'
+    },
+
+    style
+  },
 
-  iconText: { extend: IconText },
+  label: { extend: IconText },
   child: { extend: IconText }
 }

package/src/DatePicker/index.js

@@ -121,13 +121,17 @@ const main = {
     cnt: {
       childExtend: {
         extend: SquareButton,
-        props: {
+
+        props: ({ key, state }) => ({
           ...buttonProps,
-          theme: 'quinary'
-        }
+          theme: 'quaternary',
+          active: key === '18',
+          '.active': {
+            theme: 'quinary'
+          }
+        })
       },
 
-      // Generate days
       ...new Array(31).fill(undefined).map((_, i) => ({ text: i + 1 }))
     }
   }

package/src/Input.js

@@ -1,6 +1,9 @@
 'use strict'
 
+import { Focusable } from './Interaction'
+
 export const Input = {
+  extend: [Focusable],
   tag: 'input',
 
   props: {

package/src/Interaction.js

@@ -6,3 +6,37 @@ export const Interaction = {
     cursor: ({ props }) => props.cursor && ({ cursor: props.cursor })
   }
 }
+
+export const Hoverable = {
+  props: {
+    transition: 'B',
+    transitionProperty: 'opacity, transform',
+    opacity: 0.85,
+
+    ':hover': {
+      opacity: 0.9,
+      transform: 'scale(1.015)'
+    },
+    ':active': {
+      opacity: 1,
+      transform: 'scale(1.015)'
+    },
+    '.active': {
+      opacity: 1
+    }
+  }
+}
+
+export const Focusable = {
+  props: {
+    outline: 'none',
+    ':focus-visible': {
+      opacity: 1,
+      outline: 'solid, X, blue .3'
+    }
+  },
+
+  attr: {
+    placeholder: ({ props }) => props.placeholder
+  }
+}

package/src/Label.js

@@ -1,20 +1,25 @@
 'use strict'
-import { Block } from './Block'
-import { Shape } from './Shape'
-import { Text } from './Text'
 
-export const Label = {
-  extend: [Shape, Block, Text],
+import { Button } from '.'
 
-  style: { lineHeight: 1 },
+export const Label = {
+  extend: Button,
 
   props: {
+    fontSize: 'Z',
     emoji: '👍',
     text: '3',
     padding: 'X2 Z',
     round: 'C',
-    depth: 16
+    lineHeight: 1,
+    gap: 'X2',
+    depth: 16,
+    fontWeight: '500',
+    background: 'blue .3',
+    color: 'white'
   },
 
-  emoji: ({ props }) => props.emoji
+  emoji: {
+    props: ({ parent }) => ({ text: parent.props.emoji })
+  }
 }

package/src/Link.js

@@ -1,8 +1,10 @@
 'use strict'
 
 import { exec } from '@domql/utils'
+import { Focusable } from './Interaction'
 
 export const Link = {
+  extend: [Focusable],
   tag: 'a',
   props: {
     aria: {},

package/src/Theme.js

@@ -1,6 +1,5 @@
 'use strict'
 
-import { isArray, isObject } from '@domql/utils'
 import { getSpacingByKey, getMediaTheme, getColor, getMediaColor } from '@symbo.ls/scratch'
 
 import { depth } from './Shape/style'
@@ -8,15 +7,14 @@ import { depth } from './Shape/style'
 const isBorderStyle = str =>
   ['none', 'hidden', 'dotted', 'dashed', 'solid', 'double', 'groove', 'ridge', 'inset', 'outset', 'initial'].some(v => str.includes(v))
 
-const transformBorder = (border, key = 'border') => {
-  const obj = {}
-  const arr = isObject(border) ? Object.values(border) : isArray(border) ? border : border.split(', ')
-  arr.map(v => {
-    if (v.slice(-2) === 'px' || v.slice(-2) === 'em') obj[`${key}Width`] = v // TODO: add map spacing
-    else if (isBorderStyle(v)) obj[`${key}Style`] = v || 'solid'
-    else if (getColor(v)) obj[`${key}Color`] = getColor(v)
-  })
-  return obj
+const transformBorder = border => {
+  const arr = border.split(', ')
+  return arr.map(v => {
+    if (isBorderStyle(v)) return v || 'solid'
+    else if (v.slice(-2) === 'px' || v.slice(-2) === 'em') return v // TODO: add map spacing
+    else if (getColor(v).length > 2) return getColor(v)
+    return getSpacingByKey(v, 'border').border
+  }).join(' ')
 }
 
 const transformTextStroke = stroke => ({
@@ -65,14 +63,28 @@ export const Theme = {
 
     textStroke: ({ props }) => props.textStroke ? transformTextStroke(props.textStroke) : null,
 
-    border: ({ props }) => props.border ? transformBorder(props.border) : null,
+    outline: ({ props }) => props.outline && ({
+      outline: transformBorder(props.outline)
+    }),
+
+    border: ({ props }) => props.border && ({
+      border: transformBorder(props.border)
+    }),
     borderColor: ({ props }) => (props.borderColor) && getMediaColor(props.borderColor, 'borderColor'),
     borderStyle: ({ props }) => props.borderStyle && ({ borderStyle: props.borderStyle }),
 
-    borderLeft: ({ props }) => props.borderLeft ? transformBorder(props.borderLeft, 'borderLeft') : null,
-    borderTop: ({ props }) => props.borderTop ? transformBorder(props.borderTop, 'borderTop') : null,
-    borderRight: ({ props }) => props.borderRight ? transformBorder(props.borderRight, 'borderRight') : null,
-    borderBottom: ({ props }) => props.borderBottom ? transformBorder(props.borderBottom, 'borderBottom') : null,
+    borderLeft: ({ props }) => props.borderLeft && ({
+      borderLeft: transformBorder(props.borderLeft)
+    }),
+    borderTop: ({ props }) => props.borderTop && ({
+      borderTop: transformBorder(props.borderTop)
+    }),
+    borderRight: ({ props }) => props.borderRight && ({
+      borderRight: transformBorder(props.borderRight)
+    }),
+    borderBottom: ({ props }) => props.borderBottom && ({
+      borderBottom: transformBorder(props.borderBottom)
+    }),
 
     boxShadow: ({ props }) => props.boxShadow ? transformShadow(props.boxShadow) : null,
 

package/src/Timing.js

@@ -0,0 +1,65 @@
+'use strict'
+
+import { isString } from '@domql/utils'
+import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
+
+const transformTransition = transition => {
+  const arr = transition.split(' ')
+
+  if (!arr.length) return transition
+
+  return arr.map(v => {
+    if (v.length < 3 || v.includes('ms')) {
+      const mapWithSequence = getTimingByKey(v)
+      return mapWithSequence.timing || v
+    }
+    if (getTimingFunction(v)) return getTimingFunction(v)
+    return v
+  }).join(' ')
+}
+
+const transformDuration = (duration, props, propertyName) => {
+  if (!isString(duration)) return
+  return duration.split(',').map(getTimingByKey).join(',')
+}
+
+const splitTransition = transition => {
+  const arr = transition.split(',')
+  if (!arr.length) return
+  return arr.map(transformTransition).join(',')
+}
+
+export const Timing = {
+  class: {
+    transition: ({ props }) => props.transition && ({
+      transition: splitTransition(props.transition)
+    }),
+    transitionDuration: ({ props }) => props.transitionDuration && ({
+      transitionDuration: transformDuration(props.transitionDuration)
+    }),
+    transitionDelay: ({ props }) => props.transitionDelay && ({
+      transitionDelay: transformDuration(props.transitionDelay)
+    }),
+    transitionTimingFunction: ({ props }) => props.transitionTimingFunction && ({
+      transitionTimingFunction: getTimingFunction(props.transitionTimingFunction)
+    }),
+    transitionProperty: ({ props }) => props.transitionProperty && ({
+      transitionProperty: props.transitionProperty,
+      willChange: props.transitionProperty
+    }),
+
+    animationDuration: ({ props }) => props.animationDuration && ({
+      animationDuration: transformDuration(props.animationDuration)
+    }),
+    animationDelay: ({ props }) => props.animationDelay && ({
+      animationDelay: transformDuration(props.animationDelay)
+    }),
+    animationTimingFunction: ({ props }) => props.animationTimingFunction && ({
+      animationTimingFunction: getTimingFunction(props.animationTimingFunction)
+    }),
+    animationProperty: ({ props }) => props.animationProperty && ({
+      animationProperty: props.animationProperty,
+      willChange: props.animationProperty
+    })
+  }
+}

package/src/index.js

@@ -17,7 +17,8 @@ export * from './Direction'
 export * from './Position'
 export * from './Overflow'
 export * from './Transform'
-export * from './Transition'
+export * from './Timing'
+
 export * from './Media'
 export * from './Interaction'
 export * from './XYZ'

package/src/Transition.js

@@ -1,37 +0,0 @@
-'use strict'
-
-import { getTimingByKey } from '@symbo.ls/scratch'
-
-const transformTransition = transition => {
-  const arr = transition.split(' ')
-
-  if (!arr.length) return transition
-
-  return arr.map(v => {
-    if (v.length < 3 || v.includes('ms')) {
-      const mapWithSequence = getTimingByKey(v)
-      return mapWithSequence.duration
-    }
-    return v
-  }).join(' ')
-}
-
-const splitTransition = transition => {
-  const arr = transition.split(',')
-  if (!arr.length) return
-  return {
-    transition: arr.map(transformTransition).join(',')
-  }
-}
-
-export const Transition = {
-  class: {
-    transition: ({ props }) => props.transition && splitTransition(props.transition),
-    transitionEasing: ({ props }) => props.transitionEasing && ({ transitionEasing: props.transitionEasing }),
-    transitionTimingFunction: ({ props }) => props.transitionTimingFunction && ({ transitionTimingFunction: props.transitionTimingFunction }),
-    transitionProperty: ({ props }) => props.transitionProperty && ({
-      transitionProperty: props.transitionProperty,
-      willChange: props.transitionProperty
-    })
-  }
-}