@symbo.ls/atoms 3.2.3 → 3.3.4

package/Form.js

@@ -2,9 +2,4 @@
 
 export const Form = {
   tag: 'form',
-  attr: {
-    action: ({ props }) => props.action,
-    method: ({ props }) => props.method,
-    enctype: ({ props }) => props.enctype
-  }
 }

package/Grid.js

@@ -0,0 +1,37 @@
+'use strict'
+
+export const Grid = {
+  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,
+
+    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,
+
+    autoFlow: ({ props }) =>
+      props.autoFlow ? { gridAutoFlow: props.autoFlow } : null
+  }
+}

package/Iframe.js

@@ -10,21 +10,13 @@ export const Iframe = {
     src: (el, s) => {
       let src = el.call('exec', el.props.src, el)
 
+      if (!src) return
+
       if (el.call('isString', src) && src.includes('{{')) {
         src = el.call('replaceLiteralsWithObjectFields', src)
       }
 
-      let isUrl
-      try { isUrl = new URL(src) } catch (e) {}
-      if (isUrl) return src
-    },
-    srcdoc: ({ props }) => props.srcdoc,
-    sandbox: ({ props }) => props.sandbox,
-    seamless: ({ props }) => props.seamless,
-    loading: ({ props }) => props.loading,
-    allowfullscreen: ({ props }) => props.allowfullscreen,
-    frameborder: ({ props }) => props.frameborder,
-    allow: ({ props }) => props.allow,
-    referrerpolicy: ({ props }) => props.referrerpolicy
+      return src
+    }
   }
 }

package/Img.js

@@ -13,12 +13,11 @@ export const Img = {
       }
 
       let isUrl
-      try { isUrl = new URL(src) } catch (e) {}
+      try { isUrl = new URL(src) } catch (e) { }
       if (isUrl) return src
       const file = context.files && context.files[src]
       if (file) return file.content && file.content.src
     },
-    alt: ({ props }) => props.alt,
     title: ({ props }) => props.title || props.alt
   }
 }

package/InteractiveComponent.js

@@ -41,14 +41,13 @@ export const Clickable = {
 
 export const Focusable = {
   border: 'none',
-  outline: 'solid, 0, blue .3',
+  outline: 'solid 0 blue.3',
   ':focus-visible': {
     opacity: 1,
-    outline: 'solid, X, blue .3'
+    outline: 'solid X blue.3'
   },
 
   attr: {
-    placeholder: ({ props }) => props.placeholder,
     tabIndex: ({ props }) => props.tabIndex
   }
 }
@@ -63,8 +62,5 @@ export const FocusableComponent = {
   lineHeight: '1',
   whiteSpace: 'nowrap',
   fontFamily: 'inherit',
-  style,
-  attr: {
-    type: ({ props }) => props.type
-  }
+  style
 }

package/Media.js

@@ -0,0 +1,280 @@
+'use strict'
+
+import { merge, isArray, overwriteDeep, overwriteShallow } from '@domql/utils'
+import { getSystemGlobalTheme } from './Theme.js'
+
+export const keySetters = {
+  '@': (key, props, result, element, isSubtree) =>
+    applyMediaProps(
+      key,
+      props,
+      isSubtree ? result : result && result.media,
+      element
+    ),
+  ':': (key, props, result, element, isSubtree) =>
+    applySelectorProps(
+      key,
+      props,
+      isSubtree ? result : result && result.selector,
+      element
+    ),
+  '[': (key, props, result, element, isSubtree) =>
+    applySelectorProps(
+      key,
+      props,
+      isSubtree ? result : result && result.selector,
+      element
+    ),
+  '*': (key, props, result, element, isSubtree) =>
+    applySelectorProps(
+      key,
+      props,
+      isSubtree ? result : result && result.selector,
+      element
+    ),
+  '+': (key, props, result, element, isSubtree) =>
+    applySelectorProps(
+      key,
+      props,
+      isSubtree ? result : result && result.selector,
+      element
+    ),
+  '~': (key, props, result, element, isSubtree) =>
+    applySelectorProps(
+      key,
+      props,
+      isSubtree ? result : result && result.selector,
+      element
+    ),
+  '&': (key, props, result, element, isSubtree) =>
+    applyAndProps(
+      key,
+      props,
+      isSubtree ? result : result && result.selector,
+      element
+    ),
+  '>': (key, props, result, element, isSubtree) =>
+    applyAndProps(
+      key,
+      props,
+      isSubtree ? result : result && result.selector,
+      element
+    ),
+  $: (key, props, result, element, isSubtree) =>
+    applyCaseProps(
+      key,
+      props,
+      isSubtree ? result : result && result.case,
+      element
+    ),
+  '-': (key, props, result, element, isSubtree) =>
+    applyVariableProps(
+      key,
+      props,
+      isSubtree ? result : result && result.variable,
+      element
+    ),
+  '.': (key, props, result, element, isSubtree) =>
+    applyConditionalCaseProps(
+      key,
+      props,
+      isSubtree ? result : result && result.case,
+      element
+    ),
+  '!': (key, props, result, element, isSubtree) =>
+    applyConditionalFalsyProps(
+      key,
+      props,
+      isSubtree ? result : result && result.case,
+      element
+    )
+}
+
+const execClass = (key, props, result, element) => {
+  const { class: className } = element
+  const classnameExec = className[key]
+
+  if (typeof classnameExec !== 'function') return
+
+  let classExec = classnameExec(
+    {
+      props,
+      context: element.context,
+      state: element.state,
+      deps: element.deps
+    },
+    element.state,
+    element.context
+  )
+
+  if (isArray(classExec))
+    classExec = classExec.reduce((a, c) => merge(a, c), {})
+
+  for (const finalProp in classExec) {
+    result[finalProp] = classExec[finalProp]
+  }
+
+  return classExec
+}
+
+const convertPropsToClass = (props, result, element) => {
+  const propsClassObj = {}
+
+  for (const key in props) {
+    const setter = keySetters[key.slice(0, 1)]
+    if (setter) {
+      setter(key, props[key], propsClassObj, element, true)
+      continue
+    } else {
+      execClass(key, props, propsClassObj, element)
+    }
+  }
+
+  return propsClassObj
+}
+
+const applyMediaProps = (key, props, result, element) => {
+  const { context } = element
+  if (!context.designSystem || !context.designSystem.MEDIA) return
+  const globalTheme = getSystemGlobalTheme(element)
+  const { MEDIA } = context.designSystem
+  const mediaValue = MEDIA[key.slice(1)]
+  const generatedClass = convertPropsToClass(props, result, element)
+
+  const name = key.slice(1)
+  const isTheme = ['dark', 'light'].includes(name)
+  const matchesGlobal = name === globalTheme
+
+  if (globalTheme && isTheme) {
+    if (matchesGlobal) return merge(result, generatedClass)
+    return
+  }
+
+  const printValue =
+    '@media ' +
+    (mediaValue === 'print' ? `${mediaValue}` : `screen and ${mediaValue}`)
+  const mediaKey = mediaValue ? printValue : key
+  result[mediaKey] = generatedClass
+  return result[mediaKey]
+}
+
+const applyAndProps = (key, props, result, element) => {
+  result[key] = convertPropsToClass(props, result, element)
+  return result[key]
+}
+
+const applySelectorProps = (key, props, result, element) => {
+  const selectorKey = `&${key}`
+  result[selectorKey] = convertPropsToClass(props, result, element)
+  return result[selectorKey]
+}
+
+const applyCaseProps = (key, props, result, element) => {
+  const { CASES } = element.context && element.context.designSystem
+  const caseKey = key.slice(1)
+  const isPropTrue = element.props[caseKey]
+  if (!CASES[caseKey] && !isPropTrue) return
+  return merge(result, convertPropsToClass(props, result, element))
+}
+
+const applyVariableProps = (key, props, result, element) => {
+  result[key] = props
+  return result
+}
+
+const applyConditionalCaseProps = (key, props, result, element) => {
+  const caseKey = key.slice(1)
+  const isPropTrue =
+    element.props[caseKey] === true ||
+    element.state[caseKey] ||
+    element[caseKey]
+  if (!isPropTrue) return // remove classname if not here
+  return overwriteDeep(result, convertPropsToClass(props, result, element))
+}
+
+const applyConditionalFalsyProps = (key, props, result, element) => {
+  const caseKey = key.slice(1)
+  const isPropTrue =
+    element.props[caseKey] === true ||
+    element.state[caseKey] ||
+    element[caseKey]
+  if (!isPropTrue)
+    return overwriteDeep(result, convertPropsToClass(props, result, element))
+}
+
+const applyTrueProps = (props, result, element) =>
+  merge(result, convertPropsToClass(props, result, element))
+
+export const beforeClassAssign = (element, s, ctx) => {
+  const { props, class: className, context } = element
+
+  const CLASS_NAMES = {
+    media: {},
+    selector: {},
+    case: {},
+    variable: {}
+  }
+
+  if (!context) return
+  const globalTheme = context.designSystem.globalTheme
+
+  for (const key in props) {
+    const setter = keySetters[key.slice(0, 1)]
+    if (globalTheme) {
+      if (key === 'theme' && !props.themeModifier) {
+        props.themeModifier = globalTheme
+        // props.update(
+        //   {
+        //     themeModifier: globalTheme
+        //   },
+        //   {
+        //     preventListeners: true,
+        //     preventRecursive: true,
+        //     isForced: true,
+        //     preventDefineUpdate: true
+        //   }
+        // )
+      }
+    }
+    if (setter) setter(key, props[key], CLASS_NAMES, element)
+    else if (key === 'class') {
+      const value = element.props.class
+      if (!element.call('isString', value)) return
+      const classArr = value.split(' ')
+      const scratchClasses = ctx.designSystem.CLASS
+      CLASS_NAMES.class = classArr.reduce((accumulator, current) => {
+        const scratchClass = scratchClasses[current]
+        return merge(accumulator, scratchClass)
+      }, {})
+    } else if (key === 'true') applyTrueProps(props[key], CLASS_NAMES, element)
+  }
+
+  // override props
+  // if (props['^']) {
+  //   for (const key in props['^']) {
+  //     execClass(key, props, CLASS_NAMES, element)
+  //   }
+  // }
+
+  const parentProps = element.parent && element.parent.props
+  if (
+    parentProps &&
+    parentProps.spacingRatio &&
+    parentProps.inheritSpacingRatio
+  ) {
+    element.setProps(
+      {
+        spacingRatio: parentProps.spacingRatio,
+        inheritSpacingRatio: true
+      },
+      {
+        preventListeners: true,
+        preventRecursive: true,
+        isForced: true,
+        preventDefineUpdate: true
+      }
+    )
+  }
+
+  overwriteShallow(className, CLASS_NAMES)
+}

package/Picture.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { getSystemGlobalTheme } from './Theme'
+import { getSystemGlobalTheme } from './Theme.js'
 
 export const Picture = {
   deps: { getSystemGlobalTheme },
@@ -16,11 +16,11 @@ export const Picture = {
         const mediaName = (props.media || key).slice(1)
 
         if (mediaName === globalTheme) return '(min-width: 0px)'
-        else if (mediaName === 'dark' || mediaName === 'light') return '(max-width: 0px)'
+        else if (mediaName === 'dark' || mediaName === 'light')
+          return '(max-width: 0px)'
 
         return MEDIA[mediaName]
       },
-      srcset: ({ props }) => props.srcset
     }
   },
 

package/{Shape/style.js → Shape.js}

@@ -6,19 +6,33 @@ import { TIMING_PROPS } from 'css-in-props/src/props'
 const CONFIG = getActiveConfig()
 
 export const depth = {
-  4: { boxShadow: `rgba(0,0,0,.10) 0 2${CONFIG.UNIT.default} 4${CONFIG.UNIT.default}` },
-  6: { boxShadow: `rgba(0,0,0,.10) 0 3${CONFIG.UNIT.default} 6${CONFIG.UNIT.default}` },
-  10: { boxShadow: `rgba(0,0,0,.10) 0 4${CONFIG.UNIT.default} 10${CONFIG.UNIT.default}` },
-  16: { boxShadow: `rgba(0,0,0,.10) 0 8${CONFIG.UNIT.default} 16${CONFIG.UNIT.default}` },
-  26: { boxShadow: `rgba(0,0,0,.10) 0 14${CONFIG.UNIT.default} 26${CONFIG.UNIT.default}` },
-  42: { boxShadow: `rgba(0,0,0,.10) 0 20${CONFIG.UNIT.default} 42${CONFIG.UNIT.default}` }
+  4: {
+    boxShadow: `rgba(0,0,0,.10) 0 2${CONFIG.UNIT.default} 4${CONFIG.UNIT.default}`
+  },
+  6: {
+    boxShadow: `rgba(0,0,0,.10) 0 3${CONFIG.UNIT.default} 6${CONFIG.UNIT.default}`
+  },
+  10: {
+    boxShadow: `rgba(0,0,0,.10) 0 4${CONFIG.UNIT.default} 10${CONFIG.UNIT.default}`
+  },
+  16: {
+    boxShadow: `rgba(0,0,0,.10) 0 8${CONFIG.UNIT.default} 16${CONFIG.UNIT.default}`
+  },
+  26: {
+    boxShadow: `rgba(0,0,0,.10) 0 14${CONFIG.UNIT.default} 26${CONFIG.UNIT.default}`
+  },
+  42: {
+    boxShadow: `rgba(0,0,0,.10) 0 20${CONFIG.UNIT.default} 42${CONFIG.UNIT.default}`
+  }
 }
 
 const getComputedBackgroundColor = ({ props }) => {
-  return getColor(props.shapeDirectionColor) ||
+  return (
+    getColor(props.shapeDirectionColor) ||
     getColor(props.borderColor) ||
     getColor(props.backgroundColor) ||
     getColor(props.background)
+  )
 }
 
 const inheritTransition = ({ props, deps }) => {
@@ -168,10 +182,14 @@ export const SHAPES = {
       transformOrigin: '50% 50%',
       transition: inheritTransition({ props, deps }),
       transitionProperty: 'background'
-
     },
     '&:before': {
-      background: `linear-gradient(225deg, ${getComputedBackgroundColor({ props, deps })} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor({ props, deps })} 25%, transparent 25%)`
+      background: `linear-gradient(225deg, ${getComputedBackgroundColor({
+        props,
+        deps
+      })} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor(
+        { props, deps }
+      )} 25%, transparent 25%)`
     },
     '&:after': {
       background: getComputedBackgroundColor({ props, deps }),

package/Text.js

@@ -14,6 +14,7 @@ export const Strong = {
   tag: 'strong',
   fontWeight: '700'
 }
+export const U = { tag: 'u' }
 export const Underline = { tag: 'u' }
 export const Italic = { tag: 'i' }
 

package/Theme.js

@@ -1,11 +1,12 @@
 'use strict'
 
-import { depth } from './Shape/style'
+import { depth } from './Shape'
 import { isUndefined } from '@domql/utils'
 
 export const getSystemGlobalTheme = ({ context, state }) => {
   const rootState = state && state.root
-  return rootState && rootState.globalTheme ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme
+  const theme = (rootState && rootState.globalTheme) || (context.designSystem && context.designSystem.globalTheme)
+  return theme === 'auto' ? null : theme
 }
 
 export const Theme = {

package/Video.js

@@ -6,22 +6,20 @@ export const Video = {
   controls: true,
 
   childExtends: {
-    tag: 'source',
-    attr: {
-      src: ({ props }) => props.src,
-      type: ({ props }) => props.type,
-      controls: ({ props }) => props.controls
-    }
+    tag: 'source'
   },
 
   attr: {
-    src: ({ props }) => props.src,
-    playsinline: ({ props }) => props.playsinline,
-    autoplay: ({ props }) => props.autoplay,
-    loop: ({ props }) => props.loop,
-    poster: ({ props }) => props.poster,
-    muted: ({ props }) => props.muted,
-    preload: ({ props }) => props.preload,
-    controls: ({ props }) => props.controls
+    src: (el, s) => {
+      let src = el.call('exec', el.props.src, el)
+
+      if (!src) return
+
+      if (el.call('isString', src) && src.includes('{{')) {
+        src = el.call('replaceLiteralsWithObjectFields', src)
+      }
+
+      return src
+    }
   }
 }

package/index.js

@@ -12,3 +12,4 @@ export * from './Video'
 export * from './Theme'
 export * from './Text'
 export * from './Box'
+export * from './Hgroup'

package/package.json

@@ -1,17 +1,25 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "3.2.3",
+  "version": "3.3.4",
   "main": "index.js",
   "license": "MIT",
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "dependencies": {
-    "@domql/state": "^3.2.3",
-    "@domql/utils": "^3.2.3",
-    "@symbo.ls/emotion": "^3.2.3",
-    "@symbo.ls/scratch": "^3.2.3"
+    "@domql/state": "^3.3.4",
+    "@domql/utils": "^3.3.4",
+    "smbls": "^3.3.4",
+    "@symbo.ls/scratch": "^3.3.4"
   },
-  "source": "src/index.js",
+  "source": "index.js",
   "devDependencies": {
     "@babel/core": "^7.26.0"
+  },
+  "type": "module",
+  "module": "index.js",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "default": "./index.js"
+    }
   }
 }