@symbo.ls/input 2.11.226 → 2.11.234

package/Checkbox.js

@@ -57,7 +57,7 @@ export const CheckboxTitleParagraph = {
   },
 
   Checkbox: { tag: 'div' },
-  TitleParagraph: {
+  TitleParagraphRows: {
     gap: 'Z1',
     margin: 'Y - - -'
   }

package/NumberInput.js

@@ -0,0 +1,31 @@
+'use strict'
+
+import { Flex } from '@symbo.ls/atoms'
+import { Input } from './Input'
+
+export const NumberInput = {
+  extend: [Input, Flex],
+
+  props: {
+    type: 'number',
+    fontSize: 'E',
+    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/Textarea.js

@@ -9,12 +9,15 @@ export const Textarea = {
 
   props: {
     variant: 'outlined',
-    round: 'Z2',
-    width: 'H',
+    fontfamily: 'Avenir',
+    round: 'Z1',
+    maxWidth: 'H',
     minHeight: 'E',
     placeholder: 'Leave us a message...',
     padding: 'A',
+    theme: 'transparent',
     color: 'white',
+    border: 'none',
     style: { resize: 'none' }
   },
 
@@ -30,9 +33,7 @@ export const Textarea = {
 
   '.outlined': {
     props: {
-      border: '1px solid #3F3F43',
       background: 'transparent',
-      round: 'Y+W', //
       width: 'G1',
       height: 'D2+W',
       lineHeight: 1.4,
@@ -44,25 +45,6 @@ export const Textarea = {
   }
 }
 
-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' },

package/Toggle.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import { Checkbox, CheckboxTitleParagraph } from './Checkbox'
+
 /**
  * A Toggle component
  * The `Toggle` component represents a customizable checkbox input with a switch-like appearance.
@@ -48,7 +49,7 @@ export const Toggle = {
       padding: '- W',
       round: 'D',
       align: 'center flex-start',
-      background: 'gray .8 +68',
+      background: 'gray',
       border: 'none',
       transition: 'opacity .15s ease',
       ':after': {

package/index.js

@@ -1,7 +1,7 @@
 'use strict'
 
 export * from './Input'
-export * from './Number'
+export * from './NumberInput'
 export * from './Checkbox'
 export * from './Radio'
 export * from './Toggle'

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@symbo.ls/input",
-  "version": "2.11.226",
+  "version": "2.11.234",
   "main": "index.js",
   "source": "index.js",
   "license": "MIT",
-  "gitHead": "cc4d8658520b0dc949f40274fbc99f2915877f96",
+  "gitHead": "16ba231199a1a519fa482541824c9820630f826e",
   "dependencies": {
     "@domql/utils": "latest",
     "@symbo.ls/atoms": "latest"

package/Number.js

@@ -1,13 +0,0 @@
-'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
-  }
-}