amotify 0.0.17 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "description": "UI Component for React",
   "main": "dist/launch.js",
   "types": "dist/@types.d.ts",
@@ -33,7 +33,7 @@
     "@fortawesome/pro-regular-svg-icons": "^6.4.2",
     "@fortawesome/pro-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "jsmin-front": "^0.0.16",
+    "jsmin-front": "^0.0.17",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.19.0"

package/src/atoms/FAI/parts.tsx

@@ -5,55 +5,55 @@ import {
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import { faUser } from '@fortawesome/pro-solid-svg-icons/faUser';
-import { faTimes } from '@fortawesome/pro-solid-svg-icons/faTimes';
-import { faAngleRight } from '@fortawesome/pro-solid-svg-icons/faAngleRight';
-import { faAngleLeft } from '@fortawesome/pro-solid-svg-icons/faAngleLeft';
-import { faAngleUp } from '@fortawesome/pro-solid-svg-icons/faAngleUp';
-import { faAngleDown } from '@fortawesome/pro-solid-svg-icons/faAngleDown';
-import { faChevronLeft } from '@fortawesome/pro-solid-svg-icons/faChevronLeft';
-import { faChevronRight } from '@fortawesome/pro-solid-svg-icons/faChevronRight';
-import { faChevronUp } from '@fortawesome/pro-solid-svg-icons/faChevronUp';
-import { faChevronDown } from '@fortawesome/pro-solid-svg-icons/faChevronDown';
-import { faCaretLeft } from '@fortawesome/pro-solid-svg-icons/faCaretLeft';
-import { faCaretRight } from '@fortawesome/pro-solid-svg-icons/faCaretRight';
-import { faCaretUp } from '@fortawesome/pro-solid-svg-icons/faCaretUp';
-import { faCaretDown } from '@fortawesome/pro-solid-svg-icons/faCaretDown';
-import { faArrowLeft } from '@fortawesome/pro-solid-svg-icons/faArrowLeft';
-import { faArrowRight } from '@fortawesome/pro-solid-svg-icons/faArrowRight';
-import { faArrowUp } from '@fortawesome/pro-solid-svg-icons/faArrowUp';
-import { faArrowDown } from '@fortawesome/pro-solid-svg-icons/faArrowDown';
-import { faRotate } from '@fortawesome/pro-solid-svg-icons/faRotate';
-import { faRedo } from '@fortawesome/pro-solid-svg-icons/faRedo';
-import { faCheck } from '@fortawesome/pro-solid-svg-icons/faCheck';
-import { faCheckCircle } from '@fortawesome/pro-solid-svg-icons/faCheckCircle';
-import { faQuestion } from '@fortawesome/pro-solid-svg-icons/faQuestion';
-import { faQuestionCircle } from '@fortawesome/pro-solid-svg-icons/faQuestionCircle';
-import { faExclamation } from '@fortawesome/pro-solid-svg-icons/faExclamation';
-import { faExclamationTriangle } from '@fortawesome/pro-solid-svg-icons/faExclamationTriangle';
-import { faHome } from '@fortawesome/pro-solid-svg-icons/faHome';
-import { faShare } from '@fortawesome/pro-solid-svg-icons/faShare';
-import { faSearch } from '@fortawesome/pro-solid-svg-icons/faSearch';
-import { faYenSign } from '@fortawesome/pro-solid-svg-icons/faYenSign';
-import { faHeart } from '@fortawesome/pro-solid-svg-icons/faHeart';
-import { faStar } from '@fortawesome/pro-solid-svg-icons/faStar';
-import { faEdit } from '@fortawesome/pro-solid-svg-icons/faEdit';
-import { faPen } from '@fortawesome/pro-solid-svg-icons/faPen';
-import { faCopy } from '@fortawesome/pro-solid-svg-icons/faCopy';
-import { faFile } from '@fortawesome/pro-solid-svg-icons/faFile';
-import { faTrashAlt } from '@fortawesome/pro-solid-svg-icons/faTrashAlt';
-import { faBars } from '@fortawesome/pro-solid-svg-icons/faBars';
-import { faDownload } from '@fortawesome/pro-solid-svg-icons/faDownload';
-import { faLink } from '@fortawesome/pro-solid-svg-icons/faLink';
-import { faLinkSlash } from '@fortawesome/pro-solid-svg-icons/faLinkSlash';
-import { faExternalLinkAlt } from '@fortawesome/pro-solid-svg-icons/faExternalLinkAlt';
-import { faGear } from '@fortawesome/pro-solid-svg-icons/faGear';
-import { faPlus } from '@fortawesome/pro-solid-svg-icons/faPlus';
-import { faMinus } from '@fortawesome/pro-solid-svg-icons/faMinus';
-import { faEllipsisH } from '@fortawesome/pro-solid-svg-icons/faEllipsisH';
-import { faEllipsisV } from '@fortawesome/pro-solid-svg-icons/faEllipsisV';
-import { faPaperPlane } from '@fortawesome/pro-solid-svg-icons/faPaperPlane';
-import { faImage } from '@fortawesome/pro-solid-svg-icons/faImage';
+import { faUser } from '@fortawesome/pro-regular-svg-icons/faUser';
+import { faTimes } from '@fortawesome/pro-regular-svg-icons/faTimes';
+import { faAngleRight } from '@fortawesome/pro-regular-svg-icons/faAngleRight';
+import { faAngleLeft } from '@fortawesome/pro-regular-svg-icons/faAngleLeft';
+import { faAngleUp } from '@fortawesome/pro-regular-svg-icons/faAngleUp';
+import { faAngleDown } from '@fortawesome/pro-regular-svg-icons/faAngleDown';
+import { faChevronLeft } from '@fortawesome/pro-regular-svg-icons/faChevronLeft';
+import { faChevronRight } from '@fortawesome/pro-regular-svg-icons/faChevronRight';
+import { faChevronUp } from '@fortawesome/pro-regular-svg-icons/faChevronUp';
+import { faChevronDown } from '@fortawesome/pro-regular-svg-icons/faChevronDown';
+import { faCaretLeft } from '@fortawesome/pro-regular-svg-icons/faCaretLeft';
+import { faCaretRight } from '@fortawesome/pro-regular-svg-icons/faCaretRight';
+import { faCaretUp } from '@fortawesome/pro-regular-svg-icons/faCaretUp';
+import { faCaretDown } from '@fortawesome/pro-regular-svg-icons/faCaretDown';
+import { faArrowLeft } from '@fortawesome/pro-regular-svg-icons/faArrowLeft';
+import { faArrowRight } from '@fortawesome/pro-regular-svg-icons/faArrowRight';
+import { faArrowUp } from '@fortawesome/pro-regular-svg-icons/faArrowUp';
+import { faArrowDown } from '@fortawesome/pro-regular-svg-icons/faArrowDown';
+import { faRotate } from '@fortawesome/pro-regular-svg-icons/faRotate';
+import { faRedo } from '@fortawesome/pro-regular-svg-icons/faRedo';
+import { faCheck } from '@fortawesome/pro-regular-svg-icons/faCheck';
+import { faCheckCircle } from '@fortawesome/pro-regular-svg-icons/faCheckCircle';
+import { faQuestion } from '@fortawesome/pro-regular-svg-icons/faQuestion';
+import { faQuestionCircle } from '@fortawesome/pro-regular-svg-icons/faQuestionCircle';
+import { faExclamation } from '@fortawesome/pro-regular-svg-icons/faExclamation';
+import { faExclamationTriangle } from '@fortawesome/pro-regular-svg-icons/faExclamationTriangle';
+import { faHome } from '@fortawesome/pro-regular-svg-icons/faHome';
+import { faShare } from '@fortawesome/pro-regular-svg-icons/faShare';
+import { faSearch } from '@fortawesome/pro-regular-svg-icons/faSearch';
+import { faYenSign } from '@fortawesome/pro-regular-svg-icons/faYenSign';
+import { faHeart } from '@fortawesome/pro-regular-svg-icons/faHeart';
+import { faStar } from '@fortawesome/pro-regular-svg-icons/faStar';
+import { faEdit } from '@fortawesome/pro-regular-svg-icons/faEdit';
+import { faPen } from '@fortawesome/pro-regular-svg-icons/faPen';
+import { faCopy } from '@fortawesome/pro-regular-svg-icons/faCopy';
+import { faFile } from '@fortawesome/pro-regular-svg-icons/faFile';
+import { faTrashAlt } from '@fortawesome/pro-regular-svg-icons/faTrashAlt';
+import { faBars } from '@fortawesome/pro-regular-svg-icons/faBars';
+import { faDownload } from '@fortawesome/pro-regular-svg-icons/faDownload';
+import { faLink } from '@fortawesome/pro-regular-svg-icons/faLink';
+import { faLinkSlash } from '@fortawesome/pro-regular-svg-icons/faLinkSlash';
+import { faExternalLinkAlt } from '@fortawesome/pro-regular-svg-icons/faExternalLinkAlt';
+import { faGear } from '@fortawesome/pro-regular-svg-icons/faGear';
+import { faPlus } from '@fortawesome/pro-regular-svg-icons/faPlus';
+import { faMinus } from '@fortawesome/pro-regular-svg-icons/faMinus';
+import { faEllipsisH } from '@fortawesome/pro-regular-svg-icons/faEllipsisH';
+import { faEllipsisV } from '@fortawesome/pro-regular-svg-icons/faEllipsisV';
+import { faPaperPlane } from '@fortawesome/pro-regular-svg-icons/faPaperPlane';
+import { faImage } from '@fortawesome/pro-regular-svg-icons/faImage';
 
 const FAIComps: React.FC<amotify.atoms.FAI.FAIParams> = ( params ) => {
   let {

package/src/atoms/Logo/parts.tsx

@@ -10,7 +10,7 @@ import { publicURI } from '../../launch';
 
 const SVG = {
   ComunIcon: () => {
-    return ( <svg viewBox="0,0,1200,1200" className={ style.ComunIcon }>
+    return <svg viewBox="0,0,1200,1200" className={ style.ComunIcon }>
       <g>
         <path
           d='
@@ -81,11 +81,11 @@ const SVG = {
           } }
         />
       </g>
-    </svg> );
+    </svg>;
   },
   MingooIcon: () => {
     const CircleSet = ( p: number ) => {
-      return ( <>
+      return <>
         <path
           d='
             M
@@ -126,7 +126,7 @@ const SVG = {
             // fill: '#ffa500'
           } }
         />
-      </> );
+      </>;
     }
     return <svg viewBox="0,0,1200,1200" className={ style.MingooIcon }>
       { CircleSet( 0 ) }
@@ -163,19 +163,19 @@ const Mingoos = {
   LogoH: ( params: amotify.atoms.Logos.DefaultLogoTypes ) => {
     let { size,color,...others } = params;
 
-    return ( <Flex
+    return <Flex
       gap={ '1/2' }
       flexCenter
       { ...others }
     >
       <Mingoos.Icon size={ size } color={ color } />
       <Mingoos.Title size={ size } color={ color } />
-    </Flex> );
+    </Flex>;
   },
   LogoV: ( params: amotify.atoms.Logos.DefaultLogoTypes ) => {
     let { size,color,...others } = params;
 
-    return ( <Flex
+    return <Flex
       flexType="col"
       gap={ '1/2' }
       { ...others }
@@ -188,7 +188,7 @@ const Mingoos = {
       <Mingoos.Title
         size={ size } color={ color }
       />
-    </Flex> );
+    </Flex>;
   }
 }
 const Comuns = {
@@ -211,19 +211,19 @@ const Comuns = {
   LogoH: ( params: amotify.atoms.Logos.DefaultLogoTypes ) => {
     let { size,color,...others } = params;
 
-    return ( <Flex
+    return <Flex
       gap={ '1/2' }
       flexCenter
       { ...others }
     >
       <Comuns.Icon size={ size } color={ color } />
       <Comuns.Title size={ size } color={ color } />
-    </Flex> );
+    </Flex>;
   },
   LogoV: ( params: amotify.atoms.Logos.DefaultLogoTypes ) => {
     let { size,color,...others } = params;
 
-    return ( <Flex
+    return <Flex
       flexType="col"
       gap={ '1/2' }
       { ...others }
@@ -236,7 +236,7 @@ const Comuns = {
       <Comuns.Title
         size={ size } color={ color }
       />
-    </Flex> );
+    </Flex>;
   }
 }
 export const Logo: amotify.atoms.Logos.Methods = {
@@ -249,7 +249,7 @@ export const Logo: amotify.atoms.Logos.Methods = {
       ...others
     } = props;
 
-    return ( <Flex
+    return <Flex
       verticalAlign='center'
       className={ [
         className,
@@ -259,7 +259,7 @@ export const Logo: amotify.atoms.Logos.Methods = {
       { ...others }
     >
       { $.is.function( Children ) ? <Children /> : Children }
-    </Flex > );
+    </Flex >;
   },
   Title: ( props: amotify.atoms.Logos.Params ) => {
     let {

package/src/atoms/Various/parts.tsx

@@ -12,14 +12,14 @@ export const Box: React.FC<amotify.atoms.BoxInput> = ( params ) => {
     freeCSS,
     ...Params
   } = StyleConverter.ToClassName( params );
-  return ( <div { ...Params } /> );
+  return <div { ...Params } />;
 }
 export const Span: React.FC<amotify.atoms.SpanProps> = ( params ) => {
   let {
     freeCSS,
     ...Params
   } = StyleConverter.ToClassName( params );
-  return ( <span { ...Params } /> );
+  return <span { ...Params } />;
 }
 
 export const Placeholder: React.FC<amotify.atoms.PlaceholderParams> = ( params ) => {
@@ -120,7 +120,7 @@ export const Flex: React.FC<amotify.atoms.FlexProps> = ( props ) => {
     ...others
   } = props;
 
-  return ( <Box
+  return <Box
     flexType={ 'row' }
     flexWrap={ true }
     display='flex'
@@ -130,7 +130,7 @@ export const Flex: React.FC<amotify.atoms.FlexProps> = ( props ) => {
     } }
     { ...others }
     children={ children }
-  /> );
+  />;
 }
 
 export const FlexBr: React.FC<amotifyUniStyleParams> = ( params ) => ( <Box
@@ -146,14 +146,14 @@ export const Grid: React.FC<amotify.atoms.GridProps> = ( props ) => {
     ...others
   } = props;
 
-  return ( <Box
+  return <Box
     freeCSS={ {
       display: 'grid',
       ...freeCSS
     } }
     { ...others }
     children={ children }
-  /> );
+  />;
 }
 
 export const Paragraph: React.FC<amotify.atoms.ParagraphProps> = ( props ) => ( <p { ...StyleConverter.ToClassName( props ) } /> )

package/src/functions/Button/_.tsx

@@ -91,34 +91,50 @@ const Styles = {
         fontColor: 'white',
         backgroundColor: color as any,
         boxShadow: 1,
-        ssEffectsOnActive: [ 'shrink','ripple.white' ]
+        ssEffectsOnActive: [
+          'shrink',
+          'push',
+          'ripple.white'
+        ]
       };
       if ( color == 'white' ) {
         styles = {
           ...styles,
           fontColor: 'theme',
-          ssEffectsOnActive: [ 'shrink','ripple.cloud' ]
+          ssEffectsOnActive: [
+            'shrink',
+            'push',
+            'ripple.cloud'
+          ]
         };
       }
     } else if ( tone == 'Sub' ) {
       styles = {
         ...styles,
         fontColor: color as any,
-        ssEffectsOnActive: 'shrink'
+        ssEffectsOnActive: [
+          'shrink',
+          'ripple.cloud'
+        ]
       };
     } else if ( tone == 'Clear' ) {
       styles = {
         ...styles,
         fontColor: color as any,
         backgroundColor: 'trans',
+        ssEffectsOnActive: [
+          'shrink',
+          'ripple.cloud'
+        ]
       };
     } else if ( tone == 'FillToBorder' ) {
       styles = {
         ...styles,
-        fontColor: 'white',
         boxShadow: 1,
+        border: '2.normal',
         borderWidth: 2,
         borderColor: color as any,
+        fontColor: color as any,
         backgroundColor: color as any,
       };
     } else if ( tone == 'BorderToFill' ) {
@@ -129,14 +145,14 @@ const Styles = {
         border: '2.normal',
         borderWidth: 2,
         borderColor: color as any,
-        backgroundColor: 'trans'
+        backgroundColor: color as any
       };
     }
 
     if ( tone != 'Link' ) {
       styles = {
         position: 'relative',
-        ssEffectsOnActive: 'shrink',
+        ssEffectsOnActive: [ 'shrink','push' ],
         ...styles
       }
     }
@@ -183,20 +199,13 @@ const SeedWrapper = ( params: SeedWrapperInput ) => {
     Params.className = [
       className,
       style.Wrap,
-      style[ 'isActive_' + !!isActive ],
+      style[ 'isNeutral_' + !isActive ],
       style[ 'isLocked_' + isLocked ],
       style[ 'Tone_' + tone ],
       style[ 'Color_' + color ],
       style[ 'Tone_' + tone + '_Color_' + color ],
     ].join( ' ' );
 
-    if ( ![ 'Link','Plain' ].includes( Params.tone ) ) {
-      Params.className = [
-        Params.className,
-        style.uae_remark
-      ].join( ' ' );
-    }
-
     if ( isActive ) {
       Params = {
         className: [

package/src/functions/Button/style.module.scss

@@ -18,14 +18,6 @@
     background-color: $color-layer4 !important;
   }
 }
-.uae_remark {
-  &:active {
-    box-shadow: $shadow2 inset, 0 0 0 transparent !important;
-  }
-  &:focus {
-    box-shadow: 0 0 0 transparent inset, $shadow3;
-  }
-}
 .Tone_ {
   &Sub_, &Clear_ {
     &Color_ {
@@ -53,10 +45,29 @@
     }
   }
 }
-.isActive_false {
-  &.Tone_Clear {
-    &:not(:hover):not(:focus) {
-      background-color: transparent;
+.isNeutral_true {
+  &.Tone_ {
+    &Clear {
+      &:not(:hover):not(:focus) {
+        background-color: transparent;
+      }
+    }
+    &BorderToFill {
+      &:not(:hover):not(:focus) {
+        background-color: transparent !important;
+      }
+    }
+    &FillToBorder {
+      &:not(:hover):not(:focus) {
+        color: white !important;
+      }
+      &_Color_ {
+        &white,&cloud {
+          &:not(:hover):not(:focus) {
+            color: #000 !important;
+          }
+        }
+      }
     }
   }
   &:hover, &:focus {
@@ -68,8 +79,8 @@
           text-decoration: underline !important;
         }
       }
-      &Normal_ {
-        &Color_ {
+      &Normal {
+        &_Color_ {
           &plain {
             background-color: $color-layer3;
             color: $font-color2;
@@ -92,14 +103,14 @@
           }
         }
       }
-      &Border_ {
+      &Border {
         background-color: $color-cloud;
       }
-      &Prime_ {
+      &Prime {
         opacity: .85;
       }
-      &Sub_, &Clear_ {
-        &Color_ {
+      &Sub, &Clear {
+        &_Color_ {
           &theme {
             background-color: $color-theme-opacity-low;
             color: $color-theme;
@@ -128,50 +139,13 @@
           }
         }
       }
-      &FillToBorder_ {
-        background-color: $color-layer1;
-        &Color_ {
-          &theme {
-            color: $color-theme;
-          }
-          &posi {
-            color: $color-positive;
-          }
-          &nega {
-            color: $color-negative;
-          }
-          &warn {
-            color: $color-warning;
-          }
-          &mono {
-            color: $color-monoPrime;
-          }
-          &white {
-            color: white;
-            background-color: transparent;
-          }
-        }
+      &FillToBorder {
+        background-color: transparent;
       }
-      &BorderToFill_ {
+      &BorderToFill {
         color: white;
-        &Color_ {
-          &theme {
-            background-color: $color-theme;
-          }
-          &posi {
-            background-color: $color-positive;
-          }
-          &nega {
-            background-color: $color-negative;
-          }
-          &warn {
-            background-color: $color-warning;
-          }
-          &mono {
-            background-color: $color-monoPrime;
-            color: $color-monoSecond;
-          }
-          &white {
+        &_Color_ {
+          &white,&cloud {
             background-color: white;
             color: black;
           }