@symbo.ls/default-config 3.8.8 → 3.14.0

package/components/Atoms/Video.js

@@ -0,0 +1,11 @@
+'use strict'
+
+export const Video = {
+  tag: 'video',
+
+  controls: true,
+
+  childExtends: {
+    tag: 'source'
+  }
+}

package/components/Avatar.js

@@ -0,0 +1,10 @@
+'use strict'
+
+export const Avatar = {
+  extends: 'Img',
+  display: 'block',
+  avatarType: 'adventurer-neutral',
+  borderRadius: '100%',
+  boxSize: 'C+X C+X',
+  src: el => `https://api.dicebear.com/7.x/${el.avatarType || 'initials'}/svg?seed=${el.key || 'no-avatar'}`
+}

package/components/Button.js

@@ -0,0 +1,72 @@
+'use strict'
+
+/**
+ * A Button component
+ * The `Button` component represents a clickable button element with customizable styles and properties.
+ *
+ * @description
+ * @extends {FocusableComponent, IconText}
+ * @typedef {Object} Button
+ * @property {string} tag - The HTML tag used to render the button (e.g., 'button').
+ * @property {string} props.type - The type attribute of the button ('button' by default).
+ *
+ * @example
+ * // Example usage of the Button component:
+ * const myButton = {
+ *   extends: Button
+ * }
+ */
+
+export const Button = {
+  extends: ['IconText', 'FocusableComponent'],
+  tag: 'button',
+
+  fontSize: 'A',
+  type: 'button',
+  borderStyle: 'none',
+  display: 'inline-flex',
+  align: 'center center',
+  textDecoration: 'none',
+  lineHeight: '1',
+  whiteSpace: 'nowrap',
+  padding: 'Z B2',
+  fontWeight: '500',
+  fontFamily: 'inherit',
+  round: 'C2',
+
+  disabled: (el) => el.call('exec', el.disabled)
+}
+
+export const SquareButton = {
+  extends: 'Button',
+  fontSize: 'A',
+  width: 'A',
+  padding: 'Z',
+  aspectRatio: '1 / 1',
+  icon: 'smile',
+  boxSize: 'fit-content fit-content',
+  justifyContent: 'center',
+  round: 'Z2',
+  boxSizing: 'content-box'
+}
+
+export const CircleButton = {
+  extends: 'SquareButton',
+  round: 'C'
+}
+
+export const KangorooButton = {
+  extends: 'Button',
+  childExtends: 'IconText'
+}
+
+export const ButtonSet = {
+  tag: 'nav',
+  display: 'flex',
+  childExtends: 'SquareButton'
+}
+
+export const IconButton = {
+  extends: ['SquareButton', 'ClickableItem'],
+  round: 'Z'
+}

package/components/Dialog.js

@@ -0,0 +1,69 @@
+'use strict'
+
+export const Dialog = {
+  display: 'flex',
+  tag: 'dialog',
+  flow: 'column',
+  border: '0',
+  theme: 'dialog',
+  round: 'Z2'
+}
+
+export const DialogHeader = {
+  extends: 'Hgroup',
+
+  minWidth: '100%',
+  gap: 'A',
+
+  Title: {
+    align: 'center space-between',
+
+    Text: { text: 'Title' },
+
+    SquareButton: {
+      icon: 'x',
+      theme: 'transparent'
+    }
+  },
+
+  Paragraph: {
+    color: 'caption'
+  }
+}
+
+export const DialogFooter = {
+  display: 'flex',
+
+  align: 'center flex-end',
+  gap: 'X2',
+  margin: 'auto - -',
+  padding: 'Y2 X2',
+
+  childExtends: {
+    extends: 'Button',
+    textTransform: 'uppercase',
+    background: 'transparent',
+    '@dark': {
+      theme: 'primary @dark .color-only'
+    },
+    '@light': {
+      theme: 'primary @light .color-only'
+    },
+    '&': {
+      padding: 'Z A'
+    },
+    ':hover': {
+      theme: 'tertiary'
+    },
+    ':active': {
+      background: 'white.1'
+    }
+  },
+
+  Cancel: {
+    text: 'cancel'
+  },
+  Ok: {
+    text: 'ok'
+  }
+}

package/components/Dropdown.js

@@ -0,0 +1,153 @@
+'use strict'
+
+export const Dropdown = {
+  attr: { dropdown: true },
+  position: 'absolute',
+  top: '100%',
+  left: '0',
+  zIndex: 1000,
+  theme: 'quaternary',
+  padding: 'Y',
+  round: 'Z2',
+  flow: 'column',
+  gap: 'X',
+  transition: 'B defaultBezier',
+  transitionProperty: 'transform, opacity, visibility',
+  transform: 'translate3d(0,10%,0)',
+  opacity: 0,
+  visibility: 'hidden'
+}
+
+export const DropdownList = {
+  display: 'flex',
+
+  attr: {
+    dropdown: true
+  },
+
+  padding: '0 Y',
+  maxHeight: 'G',
+  flow: 'column',
+  theme: 'quaternary',
+  overflow: 'hidden auto',
+  style: { listStyleType: 'none' },
+  transition: 'B defaultBezier',
+  transitionProperty: 'transform, opacity, visibility',
+  children: (el) => el.options || [],
+  childrenAs: 'props',
+
+  '.hidden': {
+    transform: 'translate3d(0,10%,0)',
+    opacity: 0,
+    visibility: 'hidden'
+  },
+
+  childExtends: {
+    extends: 'Button',
+    state: {},
+    isActive: ({ key, state }) => state.active === key,
+    position: 'relative',
+    round: '0',
+    align: 'center flex-end',
+    flow: 'row-reverse',
+    padding: 'Z2 C Z2 Y2',
+    margin: '0',
+    gap: 'Y2',
+    theme: 'quaternary .child',
+
+    ':hover': {
+      style: {
+        svg: { opacity: '0.5' }
+      }
+    },
+
+    Icon: {
+      isActive: ({ key, state }) => state.active === key,
+      name: 'checkmark',
+      opacity: '0.1',
+      '.active': { opacity: '1' }
+    },
+
+    ':not(:first-child)': {
+      '@dark': { border: 'solid gray4.65' },
+      '@light': { border: 'solid gray11' },
+      borderWidth: '1px 0 0'
+    }
+  }
+}
+
+export const DropdownParent = {
+  position: 'relative',
+  zIndex: 999,
+  style: {
+    '&:hover': {
+      zIndex: 1000,
+      '& [dropdown]': {
+        transform: 'translate3d(0,0,0)',
+        opacity: 1,
+        visibility: 'visible'
+      }
+    }
+  }
+}
+
+export const DropdownParentFocus = {
+  position: 'relative',
+  tabindex: '0',
+  style: {
+    '&:focus-within': {
+      zIndex: 1000,
+      '& [dropdown]': {
+        transform: 'translate3d(0,0,0)',
+        opacity: 1,
+        visibility: 'visible'
+      }
+    }
+  },
+
+  Input_trigger: {
+    type: 'checkbox',
+    opacity: '0',
+    position: 'absolute',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    cursor: 'pointer',
+    onClick: (ev, el) => {
+      if (el.node === document.activeElement) el.node.blur()
+    }
+  },
+
+  Dropdown: {
+    onClick: () => {
+      document.activeElement?.blur()
+    }
+  }
+}
+export const DropdownSiblingFocus = {
+  position: 'relative',
+  tabindex: '0',
+  style: {
+    '&:focus-within': {
+      zIndex: 1000,
+      '& ~ [dropdown]': {
+        transform: 'translate3d(0,0,0)',
+        opacity: 1,
+        visibility: 'visible'
+      }
+    }
+  },
+
+  Input_trigger: {
+    type: 'checkbox',
+    opacity: '0',
+    position: 'absolute',
+    inset: '0',
+    width: '100%',
+    height: '100%',
+    cursor: 'pointer',
+    onClick: (ev, el) => {
+      if (el.node === document.activeElement) el.node.blur()
+    }
+  }
+}

package/components/Icon/index.js

@@ -0,0 +1,236 @@
+'use strict'
+
+const inheritFromIsActive = (el) => {
+  const propsActive = el['.isActive']
+  if (!propsActive) return
+  return el.call('exec', propsActive.name || propsActive.icon)
+}
+
+const getIconName = (el, s) => {
+  const { key } = el
+  let icon = el.call('exec', el.name || el.icon || key, el)
+
+  if (el.call('isString', icon) && icon.includes('{{')) {
+    icon = el.call('replaceLiteralsWithObjectFields', icon)
+  }
+
+  return el.call('isString', icon) ? icon : key
+}
+
+export const Icon = {
+  extends: 'Svg',
+  width: 'A',
+  height: 'A',
+  display: 'inline-block',
+  style: { fill: 'currentColor', '*': { fill: 'currentColor' } },
+
+  onInit: (el, s, ctx) => {
+    const { parent } = el
+    const { icons, useIconSprite, verbose } = ctx && ctx.designSystem
+    const { toCamelCase } = ctx && ctx.utils
+
+    const inheritFromIsActive = (el) => {
+      const propsActive = el['.isActive']
+      if (!propsActive) return
+      return el.call('exec', propsActive.name || propsActive.icon)
+    }
+
+    const getSemanticIcon = (el, s, ctx) => {
+      const { semanticIcons } = ctx && ctx.designSystem
+      const { toCamelCase } = ctx && ctx.utils
+
+      let iconName = getIconName(el, s)
+      const camelCase = toCamelCase(iconName)
+      const isArray = camelCase.split(/([a-z])([A-Z])/g)
+      const semanticIconRootName = isArray[1]
+        ? isArray[0]
+        : iconName.split('.')[0].split(' ')[0]
+      const semanticIcon =
+        semanticIcons && semanticIcons[semanticIconRootName]
+      if (semanticIcon) {
+        const iconKey = iconName.includes('.')
+          ? 'sfsymbols.' + iconName.split('.').slice(1).join('.')
+          : 'sfsymbols'
+        iconName =
+          semanticIcon[iconKey] ||
+          semanticIcon[iconName.split('.')[0].split(' ')[0]]
+        return {
+          tag: 'span',
+          semanticIcons: true,
+          width: 'A',
+          height: 'A',
+          lineHeight: '1em',
+          ':after': {
+            fontSize: 'Z',
+            fontWeight: '300',
+            content: `"${iconName}"`,
+            textAlign: 'center',
+            display: 'inline-block',
+            style: {
+              color: 'currentColor',
+              fontFamily: "'SF Pro Icons', 'SF Pro', 'SF Symbols', 'Segoe UI'"
+            }
+          }
+        }
+      }
+    }
+
+    const getIconName = (el, s) => {
+      const { key } = el
+      let icon = el.call('exec', el.name || el.icon || key, el)
+
+      if (el.call('isString', icon) && icon.includes('{{')) {
+        icon = el.call('replaceLiteralsWithObjectFields', icon)
+      }
+
+      return el.call('isString', icon) ? icon : key
+    }
+
+    let iconName = getIconName(el, s)
+
+    // Handle variant suffixes (e.g. 'deviceBigScreen outline' -> 'deviceBigScreenOutline')
+    if (iconName.includes(' ')) {
+      const parts = iconName.split(' ')
+      iconName =
+        parts[0] +
+        parts
+          .slice(1)
+          .map((p) => p.charAt(0).toUpperCase() + p.slice(1))
+          .join('')
+    }
+
+    const camelCase = toCamelCase(iconName)
+    const isArray = camelCase.split(/([a-z])([A-Z])/g)
+    const semanticIcon = getSemanticIcon(el, s, ctx)
+    if (semanticIcon) {
+      Object.assign(el, semanticIcon)
+      return
+    }
+
+    let activeIconName
+    if (el.isActive) activeIconName = inheritFromIsActive(el)
+    const parentPropsActive = parent['.isActive']
+    if (
+      parent &&
+      parent.isActive &&
+      parentPropsActive &&
+      parentPropsActive.icon
+    ) {
+      activeIconName = el.call(
+        'exec',
+        parentPropsActive.icon ||
+          parentPropsActive.Icon.name ||
+          parentPropsActive.Icon.icon,
+        el
+      )
+    }
+
+    if (el.call('isString', activeIconName) && activeIconName.includes('{{')) {
+      activeIconName = el.call(
+        'replaceLiteralsWithObjectFields',
+        activeIconName
+      )
+    }
+
+    let iconInContext
+    if (icons[activeIconName]) iconInContext = activeIconName
+    if (icons[camelCase]) iconInContext = camelCase
+    else if (icons[isArray[0] + isArray[1]])
+      iconInContext = isArray[0] + isArray[1]
+    else if (icons[isArray[0]]) iconInContext = isArray[0]
+    else {
+      if (verbose) el.warn("Can't find icon:", iconName, iconInContext)
+    }
+
+    const iconFromLibrary = icons[iconInContext]
+    const directSrc = (parent && parent.src) || el.src
+
+    Object.assign(el, {
+      spriteId: useIconSprite && iconInContext,
+      src: iconFromLibrary || directSrc || icons.noIcon
+    })
+  },
+
+  attr: { viewBox: '0 0 24 24' }
+}
+
+export const IconText = {
+  display: 'flex',
+
+  align: 'center center',
+  lineHeight: 1,
+
+  '.reversed': {
+    flow: 'row-reverse'
+  },
+
+  '.vertical': {
+    flow: 'column'
+  },
+
+  Icon: {
+    if: (el) => {
+      const { parent } = el
+      return el.call(
+        'exec',
+        parent.icon || el.name || el.sfSymbols || parent.sfSymbols,
+        el
+      )
+    },
+    icon: (el) => el.call('exec', el.parent.icon, el.parent)
+  },
+
+  text: (el) => el.text
+}
+
+export const FileIcon = {
+  display: 'flex',
+  theme: 'tertiary',
+  boxSize: 'C1',
+  align: 'center center',
+  round: 'Z2',
+  Icon: {
+    fontSize: 'B',
+    margin: 'auto',
+    icon: 'file'
+  }
+}
+
+const getSemanticIcon = (el, s, ctx) => {
+  const { semanticIcons } = ctx && ctx.designSystem
+  const { toCamelCase } = ctx && ctx.utils
+
+  let iconName = getIconName(el, s)
+  const camelCase = toCamelCase(iconName)
+  const isArray = camelCase.split(/([a-z])([A-Z])/g)
+  const semanticIconRootName = isArray[1]
+    ? isArray[0]
+    : iconName.split('.')[0].split(' ')[0]
+  const semanticIcon = semanticIcons && semanticIcons[semanticIconRootName]
+  if (semanticIcon) {
+    const iconKey = iconName.includes('.')
+      ? 'sfsymbols.' + iconName.split('.').slice(1).join('.')
+      : 'sfsymbols'
+    iconName =
+      semanticIcon[iconKey] ||
+      semanticIcon[iconName.split('.')[0].split(' ')[0]]
+    return {
+      tag: 'span',
+      semanticIcons: true,
+      width: 'A',
+      height: 'A',
+      lineHeight: '1em',
+      ':after': {
+        fontSize: 'Z',
+        fontWeight: '300',
+        content: `"${iconName}"`,
+        textAlign: 'center',
+        display: 'inline-block',
+        style: {
+          color: 'currentColor',
+          fontFamily: "'SF Pro Icons', 'SF Pro', 'SF Symbols', 'Segoe UI'"
+        }
+      }
+    }
+  }
+}

package/components/Icon/style.js

@@ -0,0 +1,8 @@
+'use strict'
+
+export default {
+  width: '1em',
+  height: '1em',
+  fill: 'currentColor',
+  display: 'inline-block'
+}

package/components/Input/Checkbox.js

@@ -0,0 +1,54 @@
+'use strict'
+
+export const Checkbox = {
+  extends: 'Focusable',
+
+  tag: 'label',
+
+  boxSize: 'fit-content fit-content',
+  cursor: 'pointer',
+  round: 'Y',
+
+  Input: {
+    type: 'checkbox',
+    display: 'none',
+    ':checked + div': { theme: 'primary' },
+    ':checked + div > svg': {
+      transform: 'none',
+      opacity: '1'
+    },
+    attr: {
+      checked: el => el.call('exec', el.parent.checked)
+    }
+  },
+
+  Flex: {
+    align: 'center center',
+    fontSize: 'B1',
+    padding: 'V',
+    theme: 'field',
+    round: 'X2',
+    transition: 'background A defaultBezier',
+    Icon: {
+      icon: 'check',
+      opacity: '0',
+      transform: 'scale(0.9) rotate(-15deg)',
+      transition: 'opacity B defaultBezier'
+    }
+  }
+}
+
+export const CheckboxHgroup = {
+  display: 'flex',
+  tag: 'label',
+
+  boxSize: 'fit-content',
+  align: 'flex-start flex-start',
+  gap: 'A',
+
+  Checkbox: { tag: 'div' },
+  HgroupRows: {
+    gap: 'Z1',
+    margin: 'Y - - -'
+  }
+}

package/components/Input/Input.js

@@ -0,0 +1,37 @@
+'use strict'
+
+export const Input = {
+  extends: ['Focusable'],
+
+  tag: 'input',
+
+  border: 'none',
+  type: 'input',
+  theme: 'field',
+  fontSize: 'A',
+  round: 'C',
+  lineHeight: '1',
+  padding: 'Z2 B',
+
+  attr: {
+    pattern: (el) => el.pattern,
+    minLength: (el) => el.minlength,
+    maxLength: (el) => el.maxlength,
+    name: (el) => el.name,
+    autocomplete: (el) => el.autocomplete,
+    placeholder: (el) => el.placeholder,
+    value: el => {
+      if (!el.value) return
+      const val = el.call('exec', el.value, el)
+      if (el.call('isString', val) && val.includes('{{')) {
+        return el.call('replaceLiteralsWithObjectFields', val)
+      }
+      return val
+    },
+    checked: el => el.call('exec', el.checked, el),
+    disabled: (el) => el.disabled || null,
+    readonly: (el) => el.readonly,
+    required: (el) => el.required,
+    type: (el) => el.type
+  }
+}

package/components/Input/NumberInput.js

@@ -0,0 +1,25 @@
+'use strict'
+
+export const NumberInput = {
+  extends: ['Flex', 'Input'],
+
+  type: 'number',
+  boxSize: 'C+X',
+  align: 'center center',
+  textAlign: 'center',
+  round: 'Y1',
+  theme: 'transparent',
+  border: 'solid gray3',
+  borderWidth: '1px',
+  placeholder: '0',
+  fontWeight: '400',
+  '::-webkit-inner-spin-button': {
+    appearance: 'none'
+  },
+
+  attr: {
+    step: (el) => el.step,
+    min: (el) => el.min,
+    max: (el) => el.max
+  }
+}

package/components/Input/Radio.js

@@ -0,0 +1,31 @@
+'use strict'
+
+export const Radio = {
+  extends: 'Checkbox',
+
+  Input: {
+    type: 'radio',
+    ':checked + div:after': { opacity: '1' }
+  },
+
+  Flex: {
+    round: '100%',
+    padding: 'Y',
+    ':after': {
+      content: '""',
+      display: 'block',
+      boxSize: 'X+W1',
+      round: '100%',
+      background: 'white',
+      opacity: '0',
+      transition: 'opacity .15s ease-in-out'
+    },
+    Icon: null
+  }
+}
+
+export const RadioHgroup = {
+  extends: 'CheckboxHgroup',
+  Checkbox: null,
+  Radio: {}
+}