@symbo.ls/uikit 3.7.0 → 3.7.4

package/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.props.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: 'Z',
+  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/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/Dropdown.js

@@ -0,0 +1,130 @@
+'use strict'
+
+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: ({ props }) => props.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',
+    visibility: 'hidden',
+    position: 'absolute',
+    inset: '0',
+    onUpdate: (el) => el.node.blur()
+  },
+
+  Dropdown: {
+    // onClick: (ev, el) => el.parent.Input_trigger.node.blur()
+    onClick: () => {
+      document.activeElement?.blur()
+    }
+  }
+}
+export const DropdownSiblingFocus = {
+  props: {
+    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',
+    visibility: 'hidden',
+    position: 'absolute',
+    inset: '0',
+    onUpdate: (el) => el.node.blur()
+  }
+}

package/Icon/index.js

@@ -0,0 +1,228 @@
+'use strict'
+
+const inheritFromIsActive = el => {
+  const { props } = el
+  const propsActive = props['.isActive']
+  if (!propsActive) return
+  return el.call('exec', propsActive.name || propsActive.icon)
+}
+
+const getIconName = (el, s) => {
+  const { key, props } = el
+  let icon = el.call('exec', props.name || props.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' } },
+
+  props: (el, s, ctx) => {
+    const { props, parent } = el
+    const { icons: ICONS, useIconSprite, verbose } = ctx && ctx.designSystem
+    const { toCamelCase } = ctx && ctx.utils
+
+    const inheritFromIsActive = (el) => {
+      const { props } = el
+      const propsActive = props['.isActive']
+      if (!propsActive) return
+      return el.call('exec', propsActive.name || propsActive.icon)
+    }
+
+    const getSemanticIcon = (el, s, ctx) => {
+      const { semanticIcons: SEMANTIC_ICONS } = 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 =
+        SEMANTIC_ICONS && SEMANTIC_ICONS[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',
+          semantic_symbols: 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, props } = el
+      let icon = el.call('exec', props.name || props.icon || key, el)
+
+      if (el.call('isString', icon) && icon.includes('{{')) {
+        icon = el.call('replaceLiteralsWithObjectFields', icon)
+      }
+
+      return el.call('isString', icon) ? icon : key
+    }
+
+    const iconName = getIconName(el, s)
+    const camelCase = toCamelCase(iconName)
+    const isArray = camelCase.split(/([a-z])([A-Z])/g)
+    const semanticIcon = getSemanticIcon(el, s, ctx)
+    if (semanticIcon) return semanticIcon
+
+    let activeIconName
+    if (props.isActive) activeIconName = inheritFromIsActive(el)
+    const parentProps = parent.props
+    const parentPropsActive = parentProps['.isActive']
+    if (
+      parent &&
+      parentProps &&
+      parentProps.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.props && parent.props.src) || props.src
+
+    return {
+      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, props } = el
+      return el.call(
+        'exec',
+        parent.props.icon ||
+          props.name ||
+          props.sfSymbols ||
+          parent.props.sfSymbols,
+        el
+      )
+    },
+    icon: (el) => el.call('exec', el.parent.props.icon, el.parent)
+  },
+
+  text: ({ props }) => props.text
+}
+
+export const FileIcon = {
+  display: 'flex',
+  theme: 'tertiary',
+  boxSize: 'C1',
+  align: 'center center',
+  round: 'Z',
+  Icon: {
+    fontSize: 'B',
+    margin: 'auto',
+    icon: 'file'
+  }
+}
+
+const getSemanticIcon = (el, s, ctx) => {
+  const { semanticIcons: SEMANTIC_ICONS } = 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 = SEMANTIC_ICONS && SEMANTIC_ICONS[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',
+      semantic_symbols: 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/Icon/style.js

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

package/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.props.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/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: ({ props }) => props.pattern,
+    minLength: ({ props }) => props.minlength,
+    maxLength: ({ props }) => props.maxlength,
+    name: ({ props }) => props.name,
+    autocomplete: ({ props }) => props.autocomplete,
+    placeholder: ({ props }) => props.placeholder,
+    value: el => {
+      if (!el.props || !el.props.value) return
+      const val = el.call('exec', el.props.value, el)
+      if (el.call('isString', val) && val.includes('{{')) {
+        return el.call('replaceLiteralsWithObjectFields', val)
+      }
+      return val
+    },
+    checked: el => el.call('exec', el.props.checked, el),
+    disabled: ({ props }) => props.disabled || null,
+    readonly: ({ props }) => props.readonly,
+    required: ({ props }) => props.required,
+    type: ({ props }) => props.type
+  }
+}

package/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: ({ props }) => props.step,
+    min: ({ props }) => props.min,
+    max: ({ props }) => props.max
+  }
+}

package/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: {}
+}

package/Input/Textarea.js

@@ -0,0 +1,54 @@
+'use strict'
+
+export const Textarea = {
+  tag: 'textarea',
+  extends: ['Input', 'Flex'],
+
+  variant: 'outlined',
+  fontfamily: 'Avenir',
+  round: 'Z1',
+  placeholder: 'Leave us a message...',
+  padding: 'A',
+  theme: 'field',
+  border: 'none',
+  maxWidth: 'G1_default',
+  minHeight: 'E_default',
+  width: '100%',
+  height: 'E1_default',
+  fontFamily: 'inherit',
+  style: { resize: 'none' },
+
+  '.simple': {
+    theme: 'field',
+    round: 'Z2',
+    lineHeight: 1.4
+  },
+
+  '.outlined': {
+    theme: 'field',
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    lineHeight: 1.4,
+    placeholder: 'Leave us a message...',
+    resize: 'none'
+  },
+
+  html: (el, s) => el.props.value
+}
+
+export const TextareaWithButton = {
+  display: 'flex',
+  gap: 'Y2',
+  Textarea: {
+    height: 'C2+W',
+    minWidth: 'H',
+    padding: 'A',
+    fontSize: 'Z1',
+    round: 'Z2',
+    minHeight: 'fit-content'
+  },
+  SquareButton: {
+    background: 'blue',
+    Icon: { name: 'send' }
+  }
+}