@symbo.ls/input 2.11.160 → 2.11.164

package/CheckBox.js

@@ -0,0 +1,56 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/atoms'
+
+export const CheckBox = {
+  tag: 'label',
+
+  props: {
+    boxSize: 'fit-content fit-content',
+    cursor: 'pointer',
+    round: 'Y'
+  },
+
+  Input: {
+    type: 'checkbox',
+    display: 'none',
+    ':checked ~ div': {
+      background: '#0474F2',
+      border: '1px solid transparent'
+    },
+    ':checked ~ div > svg': { opacity: '1' }
+  },
+
+  Flex: {
+    props: {
+      align: 'center center',
+      fontSize: 'B1',
+      padding: 'V',
+      border: '1px solid #57575C',
+      round: 'X2',
+      transition: 'background .15s ease-in-out'
+    },
+    Icon: {
+      props: {
+        icon: 'check',
+        opacity: '0',
+        transition: 'opacity .15s ease-in-out'
+      }
+    }
+  }
+}
+
+export const CheckBoxTitleParagraph = {
+  extend: Flex,
+  props: {
+    boxSize: 'fit-content',
+    align: 'flex-start flex-start',
+    gap: 'A'
+  },
+
+  CheckBox: {},
+  TitleParagraph: {
+    gap: 'Z1',
+    margin: 'Y - - -'
+  }
+}

package/Input.js

@@ -0,0 +1,42 @@
+'use strict'
+
+import { isString, replaceLiteralsWithObjectFields } from '@domql/utils'
+import { Focusable } from '@symbo.ls/atoms'
+
+export const Input = {
+  tag: 'input',
+  extend: [Focusable],
+
+  deps: { isString, replaceLiteralsWithObjectFields },
+
+  props: {
+    border: 'none',
+    type: 'input',
+    // theme: 'tertiary',
+    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,
+    autocomplete: ({ props }) => props.autocomplete,
+    placeholder: ({ props }) => props.placeholder,
+    value: ({ props, state, deps }) => {
+      const { isString, replaceLiteralsWithObjectFields } = deps
+      if (isString(props.value) && props.value.includes('{{')) {
+        return replaceLiteralsWithObjectFields(props.value, state)
+      }
+      return props.value
+    },
+    disabled: ({ props }) => props.disabled || null,
+    readonly: ({ props }) => props.readonly,
+    required: ({ props }) => props.required,
+    type: ({ props }) => props.type
+  }
+}

package/Number.js

@@ -0,0 +1,13 @@
+'use strict'
+
+import { Input } from './Input'
+
+export const NumberInput = {
+  extend: Input,
+  props: { type: 'number' },
+  attr: {
+    step: ({ props }) => props.step,
+    min: ({ props }) => props.min,
+    max: ({ props }) => props.max
+  }
+}

package/Radio.js

@@ -0,0 +1,35 @@
+'use strict'
+
+import { CheckBox, CheckBoxTitleParagraph } from './CheckBox'
+
+export const Radio = {
+  extend: CheckBox,
+
+  Input: {
+    type: 'radio',
+    ':checked ~ div:after': { opacity: '1' }
+  },
+
+  Flex: {
+    props: {
+      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 RadioTitleParagraph = {
+  extend: CheckBoxTitleParagraph,
+  CheckBox: null,
+  Radio: {}
+}

package/TextArea.js

@@ -0,0 +1,61 @@
+'use strict'
+import { Flex } from '@symbo.ls/atoms'
+import { Input } from './Input'
+
+export const TextArea = {
+  tag: 'textarea',
+  extend: [Input, Flex],
+  props: {
+    border: '1px solid #3F3F43',
+    background: 'transparent',
+    round: 'Y+W',
+    width: 'G1',
+    height: 'D2+W',
+    lineHeight: 1.4,
+    placeholder: 'Leave us a message...',
+    fontSize: 'Y2',
+    outline: 'none !important',
+    color: 'white',
+    style: { resize: 'none' }
+  }
+}
+
+export const TextAreaWithTitle = {
+  extend: Flex,
+  props: {
+    flow: 'column',
+    boxSize: 'fit-content fit-content',
+    gap: 'Y+W'
+  },
+  Title: {
+    props: {
+      text: 'Label',
+      fontSize: 'Z',
+      lineHeight: '1em',
+      padding: '- - - Z',
+      color: 'gray4'
+    }
+  },
+  TextArea: {}
+}
+
+export const TextAreaWithButton = {
+  extend: Flex,
+  props: { gap: 'Y2' },
+  TextArea: {
+    height: '52px',
+    padding: 'A',
+    fontSize: 'Z1',
+    color: 'white',
+    placeholder: 'Message',
+    round: 'Z2'
+    // background: 'gray'
+
+  },
+  IconButton: {
+    props: {
+      background: 'blue',
+      icon: { name: 'send' }
+    }
+  }
+}

package/Toggle.js

@@ -0,0 +1,40 @@
+'use strict'
+
+import { CheckBox, CheckBoxTitleParagraph } from './CheckBox'
+
+export const Toggle = {
+  extend: CheckBox,
+
+  Input: {
+    ':checked ~ div': {
+      background: 'green2 +8',
+      justifyContent: 'flex-end'
+    }
+  },
+
+  Flex: {
+    props: {
+      boxSize: 'A+X B+Z',
+      padding: '- W',
+      round: 'D',
+      align: 'center flex-start',
+      background: 'gray .8 +68',
+      border: 'none',
+      transition: 'opacity .15s ease',
+      ':after': {
+        content: '""',
+        boxSize: 'A A',
+        round: '100%',
+        background: 'white',
+        boxShadow: '1px, 1px, Z, gray .2'
+      }
+    },
+    Icon: null
+  }
+}
+
+export const ToggleTitleParagraph = {
+  extend: CheckBoxTitleParagraph,
+  CheckBox: null,
+  Toggle: {}
+}

package/index.js

@@ -1,54 +1,8 @@
 'use strict'
 
-import { isString, replaceLiteralsWithObjectFields } from '@domql/utils'
-import { Focusable } from '@symbo.ls/atoms'
-
-export const Input = {
-  extend: [Focusable],
-  tag: 'input',
-
-  deps: { isString, replaceLiteralsWithObjectFields },
-
-  props: {
-    border: 'none',
-    type: 'input',
-    theme: 'tertiary',
-    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,
-    autocomplete: ({ props }) => props.autocomplete,
-    placeholder: ({ props }) => props.placeholder,
-    value: ({ props, state, deps }) => {
-      const { isString, replaceLiteralsWithObjectFields } = deps
-      if (isString(props.value) && props.value.includes('{{')) {
-        return replaceLiteralsWithObjectFields(props.value, state)
-      }
-      return props.value
-    },
-    disabled: ({ props }) => props.disabled || null,
-    readonly: ({ props }) => props.readonly,
-    required: ({ props }) => props.required,
-    type: ({ props }) => props.type
-  }
-}
-
-export const NumberInput = {
-  extend: Input,
-  props: {
-    type: 'number'
-  },
-  attr: {
-    step: ({ props }) => props.step,
-    min: ({ props }) => props.min,
-    max: ({ props }) => props.max
-  }
-}
+export * from './Input'
+export * from './Number'
+export * from './CheckBox'
+export * from './Radio'
+export * from './Toggle'
+export * from './TextArea'

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@symbo.ls/input",
-  "version": "2.11.160",
+  "version": "2.11.164",
   "main": "index.js",
   "source": "index.js",
   "license": "MIT",
-  "gitHead": "f36bc99a2d0c1b771e3d8e104d1b1005b2b0a33a",
+  "gitHead": "943a48800e5959b8c1f15d5d8d49224565038c23",
   "dependencies": {
-    "@symbo.ls/atoms": "latest"
+    "@domql/utils": "latest",
+    "@symbo.ls/atoms": "latest",
+    "@symbo.ls/paragraphbutton": "latest"
   }
 }