smbls 0.14.3 → 0.14.4

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.4",
   "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

@@ -7,7 +7,10 @@ const style = {
   border: 'none',
   outline: 0,
   cursor: 'pointer',
-  fontFamily: 'inherit'
+  fontFamily: 'inherit',
+  '& > *': {
+    pointerEvents: 'none'
+  }
 }
 
 export const Button = {
@@ -51,9 +54,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/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,7 @@ 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
-    })
-  }
-}