smbls 2.7.12 → 2.8.0

package/src/IconText.js

@@ -1,20 +0,0 @@
-'use strict'
-
-import { Flex, Icon } from '.'
-
-export const IconText = {
-  extend: Flex,
-
-  props: {
-    align: 'center center',
-    lineHeight: 1
-  },
-
-  icon: {
-    extend: Icon,
-    if: ({ parent }) => parent.props.icon,
-    props: 'match'
-  },
-
-  text: ({ props }) => props.text
-}

package/src/Input.js

@@ -1,32 +0,0 @@
-'use strict'
-
-import { Focusable } from '.'
-
-export const Input = {
-  extend: [Focusable],
-  tag: 'input',
-
-  props: {
-    border: 'none',
-    type: 'input',
-    theme: 'quaternary',
-    fontSize: 'A',
-    round: 'C',
-    lineHeight: 1,
-    fontFamily: 'smbls',
-    padding: 'Z A'
-  },
-
-  attr: {
-    pattern: ({ props }) => props.pattern,
-    minlength: ({ props }) => props.minlength,
-    maxlength: ({ props }) => props.maxlength,
-    name: ({ props }) => props.name,
-    placeholder: ({ props }) => props.placeholder,
-    value: ({ props, state }) => props.value,
-    disabled: ({ props }) => props.disabled || null,
-    readonly: ({ props }) => props.readonly,
-    required: ({ props }) => props.required,
-    type: ({ props }) => props.type
-  }
-}

package/src/Label.js

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

package/src/Link.js

@@ -1,20 +0,0 @@
-'use strict'
-
-import { exec } from '@domql/utils'
-import { Focusable } from './atoms'
-
-export const Link = {
-  extend: Focusable,
-  tag: 'a',
-  props: {
-    aria: {},
-    fontWeight: 'bold',
-    textDecoration: 'none',
-    color: 'currentColor'
-  },
-  attr: {
-    href: element => exec(element.props.href, element) || exec(element.props, element).href,
-    target: ({ props }) => props.target,
-    'aria-label': ({ props }) => props.aria ? props.aria.label : props.text
-  }
-}

package/src/Notification.js

@@ -1,46 +0,0 @@
-'use strict'
-
-import { IconText, Flex } from '.'
-
-export const Notification = {
-  extend: Flex,
-
-  props: {
-    theme: 'alert',
-    padding: 'Z1 B Z A',
-    round: 'A A A Y2',
-    gap: 'X2',
-    cursor: 'pointer',
-    align: 'flex-start center',
-
-    icon: {
-      icon: 'info outline'
-    },
-
-    article: {
-      flow: 'column',
-      align: 'flex-start',
-      gap: 'X2',
-      title: {
-        fontWeight: '600',
-        lineHeight: '1em',
-        text: 'Notification'
-      },
-      p: {
-        fontSize: 'Z',
-        margin: '0',
-        text: 'is not always a distraction'
-      }
-    }
-  },
-
-  icon: {
-    extend: [IconText]
-  },
-
-  article: {
-    extend: Flex,
-    title: {},
-    p: {}
-  }
-}

package/src/Pills.js

@@ -1,25 +0,0 @@
-'use strict'
-
-import { Flex } from '.'
-
-export const Pills = {
-  extend: Flex,
-  props: (el, s) => ({
-    display: 'flex',
-    gap: 'Y2',
-
-    childProps: {
-      background: 'gray6',
-      width: 'Y2',
-      height: 'Y2',
-      round: 'A',
-
-      '.active': {
-        background: 'gray9'
-      }
-    }
-  }),
-  childExtend: {
-    props: (el, s) => ({ active: parseInt(el.key) === s.active })
-  }
-}

package/src/Range.js

@@ -1,132 +0,0 @@
-'use strict'
-
-import { opacify } from '@symbo.ls/scratch'
-import { isFunction } from '@domql/utils'
-
-import { SquareButton } from '.'
-
-const props = {
-  appearance: 'none',
-  width: '100%',
-  height: '2px',
-  outline: 'none',
-  flex: 1,
-
-  style: {
-    appearance: 'none'
-  },
-
-  '::-webkit-slider-thumb': {
-    boxSizing: 'content-box',
-    width: '8px',
-    height: '8px',
-    borderWidth: '2px',
-    borderStyle: 'solid',
-    borderRadius: '100%',
-    opacity: '.8',
-
-    style: {
-      appearance: 'none'
-    }
-  },
-
-  '::-webkit-slider-runnable-track': {
-  },
-
-  '@dark': {
-    background: 'white 0.2',
-
-    '::-webkit-slider-thumb': {
-      background: '#232526',
-      borderColor: opacify('#454646', 0.75)
-    },
-
-    ':hover': {
-      '::-webkit-slider-thumb': {
-        borderColor: opacify('#fff', 0.35)
-      }
-    },
-
-    ':focus': {
-      '::-webkit-slider-thumb': {
-        borderColor: '#3C6AC0'
-      }
-    }
-  },
-
-  '@light': {
-    background: 'gray9',
-
-    '::-webkit-slider-thumb': {
-      background: 'white',
-      borderColor: 'gray9'
-    },
-
-    ':hover': {
-      '::-webkit-slider-thumb': {
-        borderColor: 'gray7'
-      }
-    },
-
-    ':focus': {
-      '::-webkit-slider-thumb': {
-        borderColor: 'blue'
-      }
-    }
-  }
-}
-
-export const Range = {
-  props,
-
-  tag: 'input',
-  attr: { type: 'range' }
-}
-
-const listenProp = (el, prop, def) => {
-  const val = el.props && el.props[prop]
-  const r = (isFunction(val) ? val(el, el.state) : val !== undefined ? val : def !== undefined ? def : 50)
-  return r + ''
-}
-
-export const RangeWithButtons = {
-  minus: {
-    extend: SquareButton,
-    props: { theme: 'tertiary', icon: 'minus' },
-    on: {
-      click: (ev, el, s) => {
-        el.props && isFunction(el.props.onClick) && el.props.onClick(ev, el, s)
-      }
-    }
-  },
-  value: {
-    style: { width: '4ch' },
-    tag: 'span',
-    text: (el, s) => {
-      const unit = listenProp(el.parent.input, 'unit', '')
-      return '' + (s.value || 50) + unit
-    }
-  },
-  input: {
-    extend: Range,
-    attr: {
-      value: (el, s) => parseFloat(s.value),
-      min: (el, s) => listenProp(el, 'min', 0),
-      max: (el, s) => listenProp(el, 'max', 100),
-      step: (el, s) => listenProp(el, 'step', 1)
-    },
-    on: {
-      input: (ev, el, s) => el.props && isFunction(el.props.onInput) && el.props.onInput(ev, el, s),
-      change: (ev, el, s) => el.props && isFunction(el.props.onChange) && el.props.onChange(ev, el, s)
-    }
-  },
-  plus: {
-    extend: SquareButton,
-    props: { theme: 'tertiary', icon: 'plus' },
-    on: {
-      click: (ev, el, s) => {
-        el.props && isFunction(el.props.onClick) && el.props.onClick(ev, el, s)
-      }
-    }
-  }
-}

package/src/Select.js

@@ -1,36 +0,0 @@
-'use strict'
-
-import { Focusable } from './atoms'
-
-export const Select = {
-  extend: Focusable,
-  tag: 'select',
-
-  props: {
-    fontSize: 'A',
-    style: {
-      border: 'none',
-      boxSizing: 'border-box',
-      cursor: 'pointer'
-    }
-  },
-
-  childExtend: {
-    tag: 'option',
-    props: {
-      value: '',
-      selected: '',
-      disabled: ''
-    },
-    attr: {
-      value: ({ props }) => props.value,
-      selected: ({ props }) => props.selected,
-      disabled: ({ props }) => props.disabled
-    }
-  },
-
-  attr: {
-    name: ({ props }) => props.name,
-    disabled: ({ props }) => props.disabled
-  }
-}

package/src/Sidebar.js

@@ -1,23 +0,0 @@
-'use strict'
-
-import { Icon, Link } from '.'
-
-const MenuItem = {
-  extend: Link,
-  props: { icon: '' },
-  glyph: {
-    extend: Icon,
-    name: ({ props }) => props.icon
-  }
-}
-
-export const Sidebar = {
-  caption: '',
-  nav: {
-    style: {
-      a: { cursor: 'pointer' }
-    },
-    childExtend: MenuItem,
-    ...[{}]
-  }
-}

package/src/TextArea.js

@@ -1,15 +0,0 @@
-'use strict'
-
-import { Input, Focusable } from '.'
-
-const props = {
-  height: 'E',
-  lineHeight: 1.4,
-  style: { resize: 'none' }
-}
-
-export const TextArea = {
-  extend: [Input, Focusable],
-  props,
-  tag: 'textarea'
-}

package/src/Tooltip.js

@@ -1,37 +0,0 @@
-'use strict'
-
-import { Flex } from '.'
-
-export const Tooltip = {
-  extend: Flex,
-  props: {
-    background: 'black',
-    color: 'white',
-    flow: 'column',
-    shape: 'tooltip',
-    shapeDirection: 'top',
-    padding: 'Z1 A',
-    round: 'Y2',
-    minWidth: 'D2',
-    gap: 'X',
-    textAlign: 'center',
-
-    title: {
-      fontWeight: 500,
-      color: 'gray12',
-      text: 'And tooltip is coming'
-    },
-    p: {
-      fontSize: 'Z2',
-      margin: '0',
-      color: 'gray6',
-      text: 'and winter too',
-      fontWeight: '400'
-    }
-  },
-
-  attr: { tooltip: true },
-
-  title: {},
-  p: {}
-}

package/src/User.js

@@ -1,32 +0,0 @@
-'use strict'
-
-import { Img, Flex } from '.'
-
-export const User = {
-  extend: Img,
-  key: 'nikoloza',
-  props: {
-    display: 'block',
-    avatarType: 'initials',
-    borderRadius: '100%',
-    boxSize: 'B',
-    cursor: 'pointer'
-  },
-  attr: {
-    src: ({ key, props }) => props.src || `https://avatars.dicebear.com/api/${props.avatarType || 'adventurer-neutral'}/${props.key || key}.svg`
-  }
-}
-
-export const UserBundle = {
-  extend: Flex,
-  childExtend: {
-    extend: User,
-    props: ({ key }) => ({
-      boxSize: 'B1',
-      border: '0.1312em, black .85, solid',
-      ':not(:last-child)': {
-        margin: '0 -Y2 0 0'
-      }
-    })
-  }
-}

package/src/__/Media copy.js

@@ -1,121 +0,0 @@
-'use strict'
-
-import { merge, isArray } from '@domql/utils'
-import { CASES as CONFIG_CASES, MEDIA as CONFIG_MEDIA, getTheme } from '@symbo.ls/scratch'
-
-const keySetters = {
-  '@': (key, props, result, element, isSubtree) => applyMediaProps(key, props, isSubtree ? result : result.media, element),
-  ':': (key, props, result, element, isSubtree) => applySelectorProps(key, props, isSubtree ? result : result.selector, element),
-  $: (key, props, result, element, isSubtree) => applyCaseProps(key, props, isSubtree ? result : result.case, element),
-  '.': (key, props, result, element, isSubtree) => applyConditionalCaseProps(key, props, isSubtree ? 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 })
-  if (isArray(classExec)) {
-    classExec = classExec.reduce((a, c) => merge(a, c), {})
-  }
-
-  for (const finalProp in classExec) {
-    result[finalProp] = classExec[finalProp]
-  }
-}
-
-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 mediaName = CONFIG_MEDIA[key.slice(1)]
-  const mediaKey = `@media screen and ${mediaName}`
-  result[mediaKey] = convertPropsToClass(props, result, element)
-}
-
-const applySelectorProps = (key, props, result, element) => {
-  const selectorKey = `&${key}`
-  result[selectorKey] = convertPropsToClass(props, result, element)
-}
-
-const applyCaseProps = (key, props, result, element) => {
-  const caseKey = key.slice(1)
-  if (!CONFIG_CASES[caseKey]) return
-  merge(result, convertPropsToClass(props, result, element))
-}
-
-const applyConditionalCaseProps = (key, props, result, element) => {
-  const caseKey = key.slice(1)
-  if (!element.props[caseKey]) return // remove classname if not here
-  merge(result, convertPropsToClass(props, result, element))
-}
-
-const init = (element, s) => {
-  const { props, class: className } = element
-
-  const CLASS_NAMES = {
-    media: {},
-    selector: {},
-    case: {}
-  }
-
-  for (const key in props) {
-    const setter = keySetters[key.slice(0, 1)]
-    if (setter) setter(key, props[key], CLASS_NAMES, element)
-  }
-
-  merge(className, CLASS_NAMES)
-}
-
-export const initUpdate = el => {
-  // FORCE PROJECT_STATE UPDATE:
-  const { props, class: className } = el
-  const rootState = el.__root ? el.__root.state : el.state
-  // if (el.key !== 'app') return
-  const { props, class: className } = element
-
-  if (props.theme) {
-    for (const key in convertTheme) {
-      if (key.includes('dark') || key.includes('light')) {
-        const parse = key.split(': ')[1].split(')')[0]
-        if (rootState.globalTheme === parse) {
-          props.theme = getTheme(theme[key])
-        } else props.theme = theme
-        className.MEDIA_FORCED_BY_PROJECT_STATE = props.theme
-      }
-    }
-  }
-
-  for (const screen in props) {
-    if (screen.slice(0, 1) === '@') {
-      const mediaName = screen.slice(1)
-      const mediaKey = `@media screen and ${CONFIG_MEDIA[mediaName]}`
-      if (mediaName === 'dark' || mediaName === 'light') {
-        const { MEDIA_FORCE } = className
-        if (!MEDIA_FORCE) className.media = {}
-        if (rootState.globalTheme === mediaName) {
-          className.MEDIA_FORCED = className.MEDIA[mediaKey]
-        } else className.MEDIA_FORCED = {}
-      }
-    }
-  }
-}
-
-export const Responsive = {
-  on: { init, initUpdate }
-}

package/src/atoms/Animation.js

@@ -1,53 +0,0 @@
-'use strict'
-
-import { getTimingByKey, getTimingFunction } from '@symbo.ls/scratch'
-import { isObject } from '@domql/utils'
-import { convertPropsToClass } from './Media' // eslint-disable-line no-unused-vars
-import { emotion } from '@symbo.ls/create-emotion'
-const { keyframes } = emotion
-
-const applyAnimationProps = (animation, element) => {
-  if (isObject(animation)) return { animationName: keyframes(animation) }
-  const { ANIMATION } = element.context && element.context.system
-  const record = ANIMATION[animation]
-  return keyframes(record)
-}
-
-export const Animation = {
-  class: {
-    animation: (el) => el.props.animation && {
-      animationName: applyAnimationProps(el.props.animation, el),
-      animationDuration: getTimingByKey(el.props.animationDuration || 'A').timing,
-      animationDelay: getTimingByKey(el.props.animationDelay || '0s').timing,
-      animationTimingFunction: getTimingFunction(el.props.animationTimingFunction || 'ease'),
-      animationFillMode: el.props.animationFillMode || 'both',
-      animationPlayState: el.props.animationPlayState,
-      animationDirection: el.props.animationDirection
-    },
-    animationName: (el) => el.props.animationName && {
-      animationName: applyAnimationProps(el.props.animationName, el)
-    },
-
-    animationDuration: ({ props }) => props.animationDuration && ({
-      animationDuration: getTimingByKey(props.animationDuration).timing
-    }),
-    animationDelay: ({ props }) => props.animationDelay && ({
-      animationDelay: getTimingByKey(props.animationDelay).timing
-    }),
-    animationTimingFunction: ({ props }) => props.animationTimingFunction && ({
-      animationTimingFunction: getTimingFunction(props.animationTimingFunction)
-    }),
-    animationFillMode: ({ props }) => props.animationFillMode && ({
-      animationFillMode: props.animationFillMode
-    }),
-    animationPlayState: ({ props }) => props.animationPlayState && ({
-      animationPlayState: props.animationPlayState
-    }),
-    animationIterationCount: ({ props }) => props.animationIterationCount && ({
-      animationIterationCount: props.animationIterationCount || 1
-    }),
-    animationDirection: ({ props }) => props.animationDirection && ({
-      animationDirection: props.animationDirection
-    })
-  }
-}