@symbo.ls/avatar 2.11.138 → 2.11.143

package/index.js

@@ -3,6 +3,8 @@
 import { Img, Flex } from '@symbo.ls/atoms'
 import { Button } from '@symbo.ls/button'
 import { IndicatorDot } from '@symbo.ls/accessories'
+import { InfoSet } from '@symbo.ls/infoset'
+import { CardLabel } from '@symbo.ls/card'
 
 export const Avatar = {
   extend: Img,
@@ -45,7 +47,8 @@ export const AvatarBundle = {
         margin: '0 -Y2 0 0'
       }
     }
-  }
+  },
+  ...[{}, {}]
 }
 
 export const AvatarChooser = {
@@ -93,3 +96,147 @@ export const AvatarChooser = {
     }
   }
 }
+
+export const AvatarWithInfoSet = {
+  extend: Flex,
+  avatar: { extend: AvatarWithIndicator },
+  infos: {
+    extend: InfoSet,
+    ...[
+      {
+        title: { props: { text: 'Erin Schleifer' } },
+        subTitle: { caption: { props: { text: 'email@symbols.com' } } }
+      }
+    ]
+  },
+
+  props: {
+    boxSize: 'fit-content',
+    align: 'center flex-start',
+    gap: 'A',
+    infos: {
+      childProps: {
+        flow: 'column',
+        subTitle: { caption: { whiteSpace: 'nowrap' } }
+      }
+    }
+  }
+}
+
+export const AvatarInfoSetWithLabel = {
+  extend: AvatarWithInfoSet,
+  avatar: { extend: Avatar },
+  infos: {
+    ...[
+      {
+        title: { props: { text: 'ETHDOWN' } },
+        label: { extend: CardLabel },
+        subTitle: null,
+        props: { gap: 'Z' }
+      },
+      {
+        subTitle: { props: { text: 'Short ADA with up to 4x Leverage' } }
+      }
+    ]
+  },
+
+  props: {
+    avatar: { boxSize: 'B' },
+    infos: {
+      gap: 'X',
+      childProps: {
+        flow: 'row'
+      }
+    }
+  }
+}
+
+export const AvatarInfoSetWithButton = {
+  extend: AvatarWithInfoSet,
+  avatar: { extend: Avatar },
+  infos: {
+    ...[
+      {
+        title: { props: { text: 'Wallet ID' } },
+        subTitle: { caption: { props: { text: '0xfb59...d862' } } }
+      },
+      {
+        extend: Button,
+        props: { icon: 'copyOutline' }
+      }
+    ]
+  },
+
+  props: {
+    padding: 'Y A Y Y',
+    border: '1px solid #57575C',
+    round: 'Z',
+    gap: 'Z',
+    avatar: {
+      boxSize: 'A+B',
+      round: 'Y'
+    },
+    infos: {
+      flow: 'row',
+      align: 'center flex-start',
+      gap: 'A+X',
+      childProps: {
+        title: { fontSize: 'Y' },
+        ':nth-child(2)': {
+          padding: '0',
+          color: 'white',
+          fontSize: 'C',
+          background: 'transparent'
+        }
+      }
+    }
+  }
+}
+
+export const AvatarBundleInfoSet = {
+  extend: AvatarWithInfoSet,
+  avatar: { extend: AvatarBundle },
+  infos: {
+    ...[
+      {
+        title: { props: { text: 'ETH/BNB' } },
+        label: {
+          extend: CardLabel,
+          props: { text: '1 ETH = 240.7 BNB' }
+        },
+        subTitle: null
+      }
+    ]
+  },
+
+  props: {
+    gap: 'Z',
+    background: '#1C1C1F',
+    padding: 'A A',
+    round: 'Z',
+    avatar: {
+      childProps: {
+        boxSize: 'A+A',
+        ':not(:first-child)': {
+          border: 'solid, black 0',
+          borderWidth: '1px'
+        }
+        // style: {
+        //   '&:not(:first-child)': { border: '1px solid rgba(0, 0, 0, 0)' }
+        // }
+      }
+    },
+    infos: {
+      childProps: {
+        flow: 'row',
+        gap: 'Z',
+        align: 'center flex-start',
+        title: { fontWeight: '700' },
+        label: {
+          background: 'black',
+          padding: 'Y Z'
+        }
+      }
+    }
+  }
+}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/avatar",
-  "version": "2.11.138",
+  "version": "2.11.143",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "d106932603cf5402acd55e4c03b8163f9beccc5c",
+  "gitHead": "3d7bcc81ae9ee0083a70e6b95f7ecac3b73359ba",
   "dependencies": {
     "@symbo.ls/atoms": "latest",
     "@symbo.ls/button": "latest"