@xaypay/tui 0.2.13 → 0.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/tui.config.js

@@ -1,4 +1,10 @@
 import React from 'react'
+// import info from './src/assetsTMP/info.png';
+// import error from './src/assetsTMP/error.png';
+// import close from './src/assetsTMP/close.svg';
+// import warn from './src/assetsTMP/warning.png';
+// import success from './src/assetsTMP/success.png';
+import closeCall from './src/assetsTMP/closeCall.svg';
 
 const boxSizing = 'border-box';
 const fontStyle = 'normal';
@@ -30,17 +36,18 @@ const fontObject = {
 export default {
     // default properties for <Button /> component
     BUTTON: {
-        type: 'button',
+        opacity: 1,
         width: '100%',
+        radius: '6px',
+        className: '',
+        type: 'button',
         height: '46px',
         color: 'white',
-        contentWidth: false,
         border: 'none',
-        radius: '6px',
+        disabled: false,
         cursor: 'pointer',
+        contentWidth: false,
         padding: '12px 20px',
-        disabled: false,
-        className: '',
         transition: 'background-color 240ms, color 240ms',
         
         box: {
@@ -53,6 +60,10 @@ export default {
             disabled: 'rgba(60, 57, 62, 1)',
             disabledLine: 'rgba(60, 57, 62, 1)',
             disabledBackground: 'rgba(238, 238, 238, 1)',
+            withoutStyling: {
+                color: '#000000',
+                hoverColor: '#121212'
+            }
         },
 
         font: {...fontObject},
@@ -65,8 +76,11 @@ export default {
         },
 
         icon: {
+            marginLeft: '10px',
             marginRight: '10px'
-        }
+        },
+
+        withoutStyling: false
     },
     // default properties for <Input /> component
     INPUT: {
@@ -97,9 +111,11 @@ export default {
         font: {...fontObject},
         
         label: {
+            dots: false,
             color: presetColors.dark,
             display: 'block',
             lineHeight: '22px',
+            iconMargin: '10px',
             marginBottom: '6px',
 
             font: {...fontObject}
@@ -111,6 +127,7 @@ export default {
             zIndex: '1',
             className: '',
             marginTop: '10px',
+            iconMargin: '10px',
             lineHeight: '19px',
 
             font: {...fontObject}
@@ -697,6 +714,34 @@ export default {
         },
         closeAreaBackgroundColor: 'linear-gradient(to bottom, rgb(60, 57, 62), rgba(60, 57, 62, 0))' // for close div background color
     },
+    // default properties for <SwipeModal /> component
+    SWIPEMODAL: {
+        width: '300px',
+        height: '100vh',
+        titleStyle: {
+            color: '#1C212D',
+            textAlign: 'left',
+            maxHeight: '66px',
+            padding: '0px 20px',
+            font: {...fontObject},
+        },
+        parent: {
+            width: '100%',
+            height: '100vh',
+            colors: {
+                background: 'rgba(60, 61, 70, 0.2)'
+            }
+        },
+        colors: {
+            background: 'white',
+        },
+        border: {
+            radius: '10px'
+        },
+        withParent: true,
+        outSideClose: false,
+        closeIcon: closeCall,
+    },
     // default properties for <Checkbox /> component
     CHECKBOX: {
         className: '',
@@ -772,6 +817,13 @@ export default {
         order: {
             color: '#000',
             font: {...fontObject}
+        },
+
+        draggable: {
+            boxShadow: '1px 1px 9px black',
+            color: {
+                background: 'white'
+            }
         }
     },
     // default properties for <Pagination /> component
@@ -780,13 +832,48 @@ export default {
     },
     // default properties for <Toaster /> component
     TOASTER: {
+        width: '440px',
+        height: '83px',
         className: '',
-        icon: {
-            // info: React.createElement(SvgChecked, { just: 'must' }),
-            // warn: React.createElement(SvgUnchecked, { just: 'must' }),
-            // close: React.createElement(SvgChecked, { fill: 'green' }),      
-            // error: React.createElement(SvgChecked, { fill: 'green' }),      
-            // success: React.createElement(SvgChecked, { fill: 'green' }),      
+        marginBottom: '20px',
+        backgroundColor: '#FFFFFF',
+        padding: '14px 29px 14px 12px',
+        border: {
+            width: '2px',
+            style: 'solid',
+            radius: '40px',
+            color: '#EEEEEE'
+        },
+        title: {
+            color: '#3C393E',
+            lineHeight: '22px',
+            font: {
+                size: '16px',
+                style: 'normal',
+                weight: 600,
+                family: '',
+            },
+            props: {}
+        },
+        description: {
+            color: '#3C393E',
+            lineHeight: '16px',
+            font: {
+                size: '12px',
+                style: 'normal',
+                weight: 500,
+                family: '',
+            },
+            props: {
+                opacity: 0.8
+            }
+        },
+        icons: {
+            info: '',
+            warn: '',
+            error: '',
+            close: '',
+            success: ''
         }
     },
     // default properties for <Stepper /> component