@symbo.ls/atoms 2.34.20 → 2.34.22

package/Box.js

@@ -346,6 +346,32 @@ export const Box = {
   },
 
   class: {
+    // flex
+    ...{
+      flow: ({ props }) => {
+        const { flow, reverse } = props
+        if (!isString(flow)) return
+        let [direction, wrap] = (flow || 'row').split(' ')
+        if (flow.startsWith('x') || flow === 'row') direction = 'row'
+        if (flow.startsWith('y') || flow === 'column') direction = 'column'
+        return {
+          display: 'flex',
+          flexFlow:
+            (direction || '') +
+            (!direction.includes('-reverse') && reverse ? '-reverse' : '') +
+            ' ' +
+            (wrap || '')
+        }
+      },
+      wrap: ({ props }) =>
+        props.wrap && { display: 'flex', flexWrap: props.wrap },
+      align: ({ props }) => {
+        if (!isString(props.align)) return
+        const [alignItems, justifyContent] = props.align.split(' ')
+        return { display: 'flex', alignItems, justifyContent }
+      }
+    },
+
     // block
     ...{
       show: (el, s, ctx) =>
@@ -1275,3 +1301,9 @@ export const Gutter = {
     size: 'C1'
   }
 }
+
+export const Flex = {
+  props: {
+    display: 'flex'
+  }
+}

package/Grid.js

@@ -1,29 +1,37 @@
 'use strict'
 
-import { getSpacingBasedOnRatio } from '@symbo.ls/scratch'
-
 export const Grid = {
-  deps: { getSpacingBasedOnRatio },
-
   props: { display: 'grid' },
 
   class: {
-    area: ({ props }) => props.area ? ({ gridArea: props.area }) : null,
-    template: ({ props }) => props.template ? ({ gridTemplate: props.template }) : null,
-    templateAreas: ({ props }) => props.templateAreas ? ({ gridTemplateAreas: props.templateAreas }) : null,
+    area: ({ props }) => (props.area ? { gridArea: props.area } : null),
+    template: ({ props }) =>
+      props.template ? { gridTemplate: props.template } : null,
+    templateAreas: ({ props }) =>
+      props.templateAreas ? { gridTemplateAreas: props.templateAreas } : null,
 
-    column: ({ props }) => props.column ? ({ gridColumn: props.column }) : null,
-    columns: ({ props }) => props.columns ? ({ gridTemplateColumns: props.columns }) : null,
-    templateColumns: ({ props }) => props.templateColumns ? ({ gridTemplateColumns: props.templateColumns }) : null,
-    autoColumns: ({ props }) => props.autoColumns ? ({ gridAutoColumns: props.autoColumns }) : null,
-    columnStart: ({ props }) => props.columnStart ? ({ gridColumnStart: props.columnStart }) : null,
+    column: ({ props }) => (props.column ? { gridColumn: props.column } : null),
+    columns: ({ props }) =>
+      props.columns ? { gridTemplateColumns: props.columns } : null,
+    templateColumns: ({ props }) =>
+      props.templateColumns
+        ? { gridTemplateColumns: props.templateColumns }
+        : null,
+    autoColumns: ({ props }) =>
+      props.autoColumns ? { gridAutoColumns: props.autoColumns } : null,
+    columnStart: ({ props }) =>
+      props.columnStart ? { gridColumnStart: props.columnStart } : null,
 
-    row: ({ props }) => props.row ? ({ gridRow: props.row }) : null,
-    rows: ({ props }) => props.rows ? ({ gridTemplateRows: props.rows }) : null,
-    templateRows: ({ props }) => props.templateRows ? ({ gridTemplateRows: props.templateRows }) : null,
-    autoRows: ({ props }) => props.autoRows ? ({ gridAutoRows: props.autoRows }) : null,
-    rowStart: ({ props }) => props.rowStart ? ({ gridRowStart: props.rowStart }) : null,
+    row: ({ props }) => (props.row ? { gridRow: props.row } : null),
+    rows: ({ props }) => (props.rows ? { gridTemplateRows: props.rows } : null),
+    templateRows: ({ props }) =>
+      props.templateRows ? { gridTemplateRows: props.templateRows } : null,
+    autoRows: ({ props }) =>
+      props.autoRows ? { gridAutoRows: props.autoRows } : null,
+    rowStart: ({ props }) =>
+      props.rowStart ? { gridRowStart: props.rowStart } : null,
 
-    autoFlow: ({ props }) => props.autoFlow ? ({ gridAutoFlow: props.autoFlow }) : null
+    autoFlow: ({ props }) =>
+      props.autoFlow ? { gridAutoFlow: props.autoFlow } : null
   }
 }

package/index.js

@@ -1,7 +1,6 @@
 'use strict'
 
 export * from './Box.js'
-export * from './Flex.js'
 export * from './Grid.js'
 export * from './Img.js'
 export * from './Form.js'

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.34.20",
+  "version": "2.34.22",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "ee2e9cb9831ae904b984868e68219e95fd9ceeaf",
+  "gitHead": "7c230f00e3044681e6ab652e1f638eeea8dac1ec",
   "dependencies": {
-    "@domql/state": "^2.34.20",
-    "@domql/utils": "^2.34.20",
-    "@symbo.ls/emotion": "^2.34.20",
-    "@symbo.ls/scratch": "^2.34.20"
+    "@domql/state": "^2.34.22",
+    "@domql/utils": "^2.34.22",
+    "@symbo.ls/emotion": "^2.34.22",
+    "@symbo.ls/scratch": "^2.34.22"
   },
   "source": "src/index.js",
   "devDependencies": {

package/Flex.js

@@ -1,29 +0,0 @@
-'use strict'
-
-import { isString } from '@domql/utils'
-
-export const Flex = {
-  props: {
-    display: 'flex'
-  },
-
-  class: {
-    flow: ({ props }) => {
-      const { flow, reverse } = props
-      if (!isString(flow)) return
-      let [direction, wrap] = (flow || 'row').split(' ')
-      if (flow.startsWith('x') || flow === 'row') direction = 'row'
-      if (flow.startsWith('y') || flow === 'column') direction = 'column'
-      return {
-        flexFlow: (direction || '') + (!direction.includes('-reverse') && reverse ? '-reverse' : '') + ' ' + (wrap || '')
-      }
-    },
-
-    wrap: ({ props }) => props.wrap && ({ flexWrap: props.wrap }),
-    align: ({ props }) => {
-      if (!isString(props.align)) return
-      const [alignItems, justifyContent] = props.align.split(' ')
-      return { alignItems, justifyContent }
-    }
-  }
-}