@magiclabs/ui-components 1.15.0 → 1.15.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
- "use strict";var e=require("react/jsx-runtime"),y=require("../logos/icon-generic-token.js"),v=require("@styled/tokens");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var u=require("../primitives/text.js"),S=require("@styled/css"),i=require("@styled/jsx"),m=require("create-slots"),a=require("react"),d=require("react-aria");const k=m.createSlot(({children:r,...t})=>e.jsx(i.Center,{children:a.Children.map(r,n=>a.cloneElement(n,t))})),x=({name:r,USDBalance:t,tokenBalance:n,symbol:l,tokenIcon:s,logoUrl:o})=>e.jsxs(i.HStack,{w:"full",justify:"space-between",children:[e.jsxs(i.HStack,{gap:2,children:[s?{...s,props:{...s.props,width:30,height:30}}:o?e.jsx("img",{width:30,height:30,src:o,alt:`${r} logo`}):e.jsx(y.default,{width:30,height:30}),e.jsx(u.default,{styles:{fontWeight:"500",textTransform:"capitalize"},children:r})]}),e.jsxs(i.VStack,{gap:0,alignItems:"flex-end",children:[e.jsx(u.default,{size:"sm",styles:{lineHeight:"1.5rem",fontWeight:"500"},children:t}),e.jsxs(u.default,{size:"sm",styles:{lineHeight:"1.5rem",color:v.token("colors.text.secondary")},children:[n," ",l.toUpperCase()]})]})]}),B=r=>{const{name:t,symbol:n,USDBalance:l,tokenBalance:s,logoUrl:o,onPress:c}=r,h=a.useRef(null),f=a.useCallback(()=>{c?.()},[c]),{buttonProps:p}=d.useButton({...r,onPress:f},h),{isFocusVisible:b,focusProps:j}=d.useFocusRing();return m.createHost(r.children,q=>{const g=q.get(k);return c?e.jsx("button",{ref:h,...d.mergeProps(p,j),className:S.css({w:"full",p:4,minH:20,bg:"neutral.quaternary",transition:"background-color 0.2s",_hover:{bg:"neutral.secondary"},rounded:"lg",outlineColor:"brand.base",outlineStyle:b?"solid":"none",outlineWidth:"thick",outlineOffset:1,cursor:"pointer"}),children:e.jsx(x,{name:t,symbol:n,USDBalance:l,tokenBalance:s,tokenIcon:g,logoUrl:o})}):e.jsx(x,{name:t,symbol:n,USDBalance:l,tokenBalance:s,tokenIcon:g,logoUrl:o})})},U=Object.assign(B,{TokenIcon:k});exports.TokenListItem=U;
1
+ "use strict";var e=require("react/jsx-runtime"),y=require("../logos/icon-generic-token.js"),p=require("@styled/tokens");require("../primitives/button.js"),require("../primitives/checkbox.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js");var c=require("../primitives/text.js"),S=require("@styled/css"),s=require("@styled/jsx"),m=require("create-slots"),l=require("react"),u=require("react-aria");const g=m.createSlot(({children:r,...t})=>e.jsx(s.Center,{children:l.Children.map(r,n=>l.cloneElement(n,t))})),f=({name:r,fiatBalanceWithSymbol:t,tokenBalanceWithSymbol:n,tokenIcon:o,logoUrl:i})=>e.jsxs(s.HStack,{w:"full",justify:"space-between",children:[e.jsxs(s.HStack,{gap:2,children:[o?{...o,props:{...o.props,width:30,height:30}}:i?e.jsx("img",{width:30,height:30,src:i,alt:`${r} logo`}):e.jsx(y.default,{width:30,height:30}),e.jsx(c.default,{styles:{fontWeight:"500",textTransform:"capitalize"},children:r})]}),e.jsxs(s.VStack,{gap:0,alignItems:"flex-end",children:[e.jsx(c.default,{size:"sm",styles:{lineHeight:"1.5rem",fontWeight:"500"},children:t}),e.jsx(c.default,{size:"sm",styles:{lineHeight:"1.5rem",color:p.token("colors.text.secondary")},children:n})]})]}),W=r=>{const{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:o,logoUrl:i,onPress:a}=r,h=l.useRef(null),b=l.useCallback(()=>{a?.()},[a]),{buttonProps:k}=u.useButton({...r,onPress:b},h),{isFocusVisible:x,focusProps:j}=u.useFocusRing();return m.createHost(r.children,q=>{const d=q.get(g);return a?e.jsx("button",{ref:h,...u.mergeProps(k,j),className:S.css({w:"full",p:4,minH:20,bg:"neutral.quaternary",transition:"background-color 0.2s",_hover:{bg:"neutral.secondary"},rounded:"lg",outlineColor:"brand.base",outlineStyle:x?"solid":"none",outlineWidth:"thick",outlineOffset:1,cursor:"pointer"}),children:e.jsx(f,{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:o,tokenIcon:d,logoUrl:i})}):e.jsx(f,{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:o,tokenIcon:d,logoUrl:i})})},v=Object.assign(W,{TokenIcon:g});exports.TokenListItem=v;
2
2
  //# sourceMappingURL=token-list-item.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, useCallback, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n name: string;\n symbol: string;\n USDBalance: string;\n tokenBalance: number;\n logoUrl?: string;\n onPress?: () => void;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({ name, USDBalance, tokenBalance, symbol, tokenIcon, logoUrl }: ListContentProps) => {\n return (\n <HStack w=\"full\" justify=\"space-between\">\n <HStack gap={2}>\n {tokenIcon ? (\n {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 30,\n height: 30,\n },\n }\n ) : logoUrl ? (\n <img width={30} height={30} src={logoUrl} alt={`${name} logo`} />\n ) : (\n <IconGenericToken width={30} height={30} />\n )}\n <Text styles={{ fontWeight: '500', textTransform: 'capitalize' }}>{name}</Text>\n </HStack>\n <VStack gap={0} alignItems=\"flex-end\">\n <Text size=\"sm\" styles={{ lineHeight: '1.5rem', fontWeight: '500' }}>\n {USDBalance}\n </Text>\n <Text size=\"sm\" styles={{ lineHeight: '1.5rem', color: token('colors.text.secondary') }}>\n {tokenBalance} {symbol.toUpperCase()}\n </Text>\n </VStack>\n </HStack>\n );\n};\n\nconst TokenListItemBase = (props: TokenListItemProps) => {\n const { name, symbol, USDBalance, tokenBalance, logoUrl, onPress } = props;\n\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n\n if (onPress)\n return (\n <button\n ref={ref}\n {...mergeProps(buttonProps, focusProps)}\n className={css({\n w: 'full',\n p: 4,\n minH: 20,\n bg: 'neutral.quaternary',\n transition: 'background-color 0.2s',\n _hover: { bg: 'neutral.secondary' },\n rounded: 'lg',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 1,\n cursor: 'pointer',\n })}\n >\n <ListContent\n name={name}\n symbol={symbol}\n USDBalance={USDBalance}\n tokenBalance={tokenBalance}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n />\n </button>\n );\n\n return (\n <ListContent\n name={name}\n symbol={symbol}\n USDBalance={USDBalance}\n tokenBalance={tokenBalance}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n />\n );\n });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","USDBalance","tokenBalance","symbol","tokenIcon","logoUrl","_jsxs","HStack","IconGenericToken","Text","VStack","token","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","mergeProps","css","TokenListItem"],"mappings":"qfAkBA,MAAMA,EAAYC,aAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAAAA,IAACC,EAAAA,OAAM,CAAA,SACJC,WAAS,IAAIJ,EAAUK,GACfC,eAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAMKM,EAAc,CAAC,CAAE,KAAAC,EAAM,WAAAC,EAAY,aAAAC,EAAc,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,CAAO,IAE7EC,OAACC,EAAM,OAAA,CAAC,EAAE,OAAO,QAAQ,0BACvBD,EAAAA,KAACC,EAAAA,OAAO,CAAA,IAAK,YACVH,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFX,EAAAA,IAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKW,EAAS,IAAK,GAAGL,CAAI,OAAW,CAAA,EAEjEN,MAACc,EAAAA,QAAgB,CAAC,MAAO,GAAI,OAAQ,EAAE,CAAA,EAEzCd,EAAAA,IAACe,EAAAA,QAAK,CAAA,OAAQ,CAAE,WAAY,MAAO,cAAe,YAAY,EAAK,SAAAT,GAAY,CACxE,CAAA,EACTM,EAAAA,KAACI,EAAAA,OAAO,CAAA,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAhB,EAAAA,IAACe,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,WAAY,KAAO,EAAA,SAChER,CACI,CAAA,EACPK,EAACG,KAAAA,EAAAA,QAAK,CAAA,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,MAAOE,EAAAA,MAAM,uBAAuB,CAAC,EAClF,SAAA,CAAAT,EAAe,IAAAC,EAAO,YAAA,CAAa,CAAA,CAAA,CAC/B,CACA,CAAA,CAAA,CAAA,CAAA,EAKTS,EAAqBnB,GAA6B,CACtD,KAAM,CAAE,KAAAO,EAAM,OAAAG,EAAQ,WAAAF,EAAY,aAAAC,EAAc,QAAAG,EAAS,QAAAQ,CAAS,EAAGpB,EAE/DqB,EAAMC,EAAAA,OAAO,IAAI,EAEjBC,EAAcC,EAAY,YAAA,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEN,CAAE,YAAAK,CAAW,EAAKC,EAAAA,UAAU,CAAE,GAAG1B,EAAO,QAASuB,GAAeF,CAAG,EACnE,CAAE,eAAAM,EAAgB,WAAAC,GAAeC,EAAAA,aAEvC,EAAA,OAAOC,aAAW9B,EAAM,SAAU+B,GAAQ,CACxC,MAAMpB,EAAYoB,EAAM,IAAIlC,CAAS,EAErC,OAAIuB,EAEAnB,EAAAA,IACE,SAAA,CAAA,IAAKoB,KACDW,aAAWP,EAAaG,CAAU,EACtC,UAAWK,EAAAA,IAAI,CACb,EAAG,OACH,EAAG,EACH,KAAM,GACN,GAAI,qBACJ,WAAY,wBACZ,OAAQ,CAAE,GAAI,mBAAqB,EACnC,QAAS,KACT,aAAc,aACd,aAAcN,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,EACf,OAAQ,SACT,CAAA,EAED,SAAA1B,MAACK,EAAW,CACV,KAAMC,EACN,OAAQG,EACR,WAAYF,EACZ,aAAcC,EACd,UAAWE,EACX,QAASC,CACT,CAAA,CAAA,CAAA,EAKNX,EAACK,IAAAA,EAAW,CACV,KAAMC,EACN,OAAQG,EACR,WAAYF,EACZ,aAAcC,EACd,UAAWE,EACX,QAASC,CAAO,CAAA,CAGtB,CAAC,CACH,EAEasB,EAAgB,OAAO,OAAOf,EAAmB,CAAE,UAAAtB,CAAS,CAAE"}
1
+ {"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, useCallback, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n name: string;\n fiatBalanceWithSymbol: string;\n tokenBalanceWithSymbol: string;\n logoUrl?: string;\n onPress?: () => void;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({ name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, tokenIcon, logoUrl }: ListContentProps) => {\n return (\n <HStack w=\"full\" justify=\"space-between\">\n <HStack gap={2}>\n {tokenIcon ? (\n {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 30,\n height: 30,\n },\n }\n ) : logoUrl ? (\n <img width={30} height={30} src={logoUrl} alt={`${name} logo`} />\n ) : (\n <IconGenericToken width={30} height={30} />\n )}\n <Text styles={{ fontWeight: '500', textTransform: 'capitalize' }}>{name}</Text>\n </HStack>\n <VStack gap={0} alignItems=\"flex-end\">\n <Text size=\"sm\" styles={{ lineHeight: '1.5rem', fontWeight: '500' }}>\n {fiatBalanceWithSymbol}\n </Text>\n <Text size=\"sm\" styles={{ lineHeight: '1.5rem', color: token('colors.text.secondary') }}>\n {tokenBalanceWithSymbol}\n </Text>\n </VStack>\n </HStack>\n );\n};\n\nconst TokenListItemBase = (props: TokenListItemProps) => {\n const { name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, logoUrl, onPress } = props;\n\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n\n if (onPress)\n return (\n <button\n ref={ref}\n {...mergeProps(buttonProps, focusProps)}\n className={css({\n w: 'full',\n p: 4,\n minH: 20,\n bg: 'neutral.quaternary',\n transition: 'background-color 0.2s',\n _hover: { bg: 'neutral.secondary' },\n rounded: 'lg',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 1,\n cursor: 'pointer',\n })}\n >\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n />\n </button>\n );\n\n return (\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n />\n );\n });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","fiatBalanceWithSymbol","tokenBalanceWithSymbol","tokenIcon","logoUrl","_jsxs","HStack","IconGenericToken","Text","VStack","token","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","mergeProps","css","TokenListItem"],"mappings":"qfAiBA,MAAMA,EAAYC,aAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAAAA,IAACC,SAAM,CAAA,SACJC,EAAAA,SAAS,IAAIJ,EAAUK,GACfC,EAAaD,aAAAA,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAMKM,EAAc,CAAC,CAAE,KAAAC,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,UAAAC,EAAW,QAAAC,CAAO,IAE1FC,EAAAA,KAACC,EAAAA,OAAM,CAAC,EAAE,OAAO,QAAQ,0BACvBD,EAAAA,KAACC,EAAAA,OAAO,CAAA,IAAK,YACVH,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFV,EAAAA,IAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAW,CAAA,EAEjEN,MAACa,EAAiB,QAAA,CAAA,MAAO,GAAI,OAAQ,EAAM,CAAA,EAE7Cb,MAACc,EAAI,QAAA,CAAC,OAAQ,CAAE,WAAY,MAAO,cAAe,YAAc,EAAA,SAAGR,CAAI,CAAA,CAAQ,CACxE,CAAA,EACTK,EAAAA,KAACI,SAAO,CAAA,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAf,EAAAA,IAACc,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,WAAY,KAAO,EAAA,SAChEP,CAAqB,CAAA,EAExBP,EAAAA,IAACc,EAAAA,QAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,MAAOE,EAAAA,MAAM,uBAAuB,CAAC,EAClF,SAAAR,CACI,CAAA,CAAA,CAAA,CAAA,CACA,CACF,CAAA,EAIPS,EAAqBlB,GAA6B,CACtD,KAAM,CAAE,KAAAO,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,QAAAE,EAAS,QAAAQ,CAAS,EAAGnB,EAE5EoB,EAAMC,SAAO,IAAI,EAEjBC,EAAcC,EAAAA,YAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEN,CAAE,YAAAK,CAAW,EAAKC,YAAU,CAAE,GAAGzB,EAAO,QAASsB,GAAeF,CAAG,EACnE,CAAE,eAAAM,EAAgB,WAAAC,GAAeC,EAAAA,aAEvC,EAAA,OAAOC,EAAAA,WAAW7B,EAAM,SAAU8B,GAAQ,CACxC,MAAMpB,EAAYoB,EAAM,IAAIjC,CAAS,EAErC,OAAIsB,EAEAlB,EAAAA,IACE,SAAA,CAAA,IAAKmB,KACDW,EAAAA,WAAWP,EAAaG,CAAU,EACtC,UAAWK,MAAI,CACb,EAAG,OACH,EAAG,EACH,KAAM,GACN,GAAI,qBACJ,WAAY,wBACZ,OAAQ,CAAE,GAAI,mBAAqB,EACnC,QAAS,KACT,aAAc,aACd,aAAcN,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,EACf,OAAQ,UACT,EAAC,SAEFzB,MAACK,EACC,CAAA,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,CAAO,CAAA,CAEX,CAAA,EAIXV,EAAAA,IAACK,EACC,CAAA,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,CACT,CAAA,CAEN,CAAC,CACH,EAEasB,EAAgB,OAAO,OAAOf,EAAmB,CAAE,UAAArB,CAAS,CAAE"}
@@ -1,2 +1,2 @@
1
- import{jsx as o,jsxs as s}from"react/jsx-runtime";import B from"../logos/icon-generic-token.js";import{token as U}from"@styled/tokens";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import c from"../primitives/text.js";import{css as S}from"@styled/css";import{Center as w,HStack as h,VStack as x}from"@styled/jsx";import{createSlot as I,createHost as j}from"create-slots";import{Children as C,cloneElement as H,useRef as P,useCallback as D}from"react";import{useButton as z,useFocusRing as T,mergeProps as W}from"react-aria";const u=I(({children:e,...t})=>o(w,{children:C.map(e,n=>H(n,t))})),g=({name:e,USDBalance:t,tokenBalance:n,symbol:i,tokenIcon:r,logoUrl:l})=>s(h,{w:"full",justify:"space-between",children:[s(h,{gap:2,children:[r?{...r,props:{...r.props,width:30,height:30}}:l?o("img",{width:30,height:30,src:l,alt:`${e} logo`}):o(B,{width:30,height:30}),o(c,{styles:{fontWeight:"500",textTransform:"capitalize"},children:e})]}),s(x,{gap:0,alignItems:"flex-end",children:[o(c,{size:"sm",styles:{lineHeight:"1.5rem",fontWeight:"500"},children:t}),s(c,{size:"sm",styles:{lineHeight:"1.5rem",color:U("colors.text.secondary")},children:[n," ",i.toUpperCase()]})]})]}),F=e=>{const{name:t,symbol:n,USDBalance:i,tokenBalance:r,logoUrl:l,onPress:a}=e,m=P(null),d=D(()=>{a?.()},[a]),{buttonProps:f}=z({...e,onPress:d},m),{isFocusVisible:b,focusProps:k}=T();return j(e.children,y=>{const p=y.get(u);return a?o("button",{ref:m,...W(f,k),className:S({w:"full",p:4,minH:20,bg:"neutral.quaternary",transition:"background-color 0.2s",_hover:{bg:"neutral.secondary"},rounded:"lg",outlineColor:"brand.base",outlineStyle:b?"solid":"none",outlineWidth:"thick",outlineOffset:1,cursor:"pointer"}),children:o(g,{name:t,symbol:n,USDBalance:i,tokenBalance:r,tokenIcon:p,logoUrl:l})}):o(g,{name:t,symbol:n,USDBalance:i,tokenBalance:r,tokenIcon:p,logoUrl:l})})},L=Object.assign(F,{TokenIcon:u});export{L as TokenListItem};
1
+ import{jsx as o,jsxs as s}from"react/jsx-runtime";import k from"../logos/icon-generic-token.js";import{token as S}from"@styled/tokens";import"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import a from"../primitives/text.js";import{css as W}from"@styled/css";import{Center as B,HStack as h,VStack as w}from"@styled/jsx";import{createSlot as x,createHost as I}from"create-slots";import{Children as j,cloneElement as H,useRef as P,useCallback as C}from"react";import{useButton as U,useFocusRing as z,mergeProps as T}from"react-aria";const p=x(({children:e,...t})=>o(B,{children:j.map(e,n=>H(n,t))})),u=({name:e,fiatBalanceWithSymbol:t,tokenBalanceWithSymbol:n,tokenIcon:r,logoUrl:i})=>s(h,{w:"full",justify:"space-between",children:[s(h,{gap:2,children:[r?{...r,props:{...r.props,width:30,height:30}}:i?o("img",{width:30,height:30,src:i,alt:`${e} logo`}):o(k,{width:30,height:30}),o(a,{styles:{fontWeight:"500",textTransform:"capitalize"},children:e})]}),s(w,{gap:0,alignItems:"flex-end",children:[o(a,{size:"sm",styles:{lineHeight:"1.5rem",fontWeight:"500"},children:t}),o(a,{size:"sm",styles:{lineHeight:"1.5rem",color:S("colors.text.secondary")},children:n})]})]}),F=e=>{const{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:r,logoUrl:i,onPress:l}=e,m=P(null),f=C(()=>{l?.()},[l]),{buttonProps:g}=U({...e,onPress:f},m),{isFocusVisible:d,focusProps:b}=z();return I(e.children,y=>{const c=y.get(p);return l?o("button",{ref:m,...T(g,b),className:W({w:"full",p:4,minH:20,bg:"neutral.quaternary",transition:"background-color 0.2s",_hover:{bg:"neutral.secondary"},rounded:"lg",outlineColor:"brand.base",outlineStyle:d?"solid":"none",outlineWidth:"thick",outlineOffset:1,cursor:"pointer"}),children:o(u,{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:r,tokenIcon:c,logoUrl:i})}):o(u,{name:t,fiatBalanceWithSymbol:n,tokenBalanceWithSymbol:r,tokenIcon:c,logoUrl:i})})},L=Object.assign(F,{TokenIcon:p});export{L as TokenListItem};
2
2
  //# sourceMappingURL=token-list-item.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, useCallback, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n name: string;\n symbol: string;\n USDBalance: string;\n tokenBalance: number;\n logoUrl?: string;\n onPress?: () => void;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({ name, USDBalance, tokenBalance, symbol, tokenIcon, logoUrl }: ListContentProps) => {\n return (\n <HStack w=\"full\" justify=\"space-between\">\n <HStack gap={2}>\n {tokenIcon ? (\n {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 30,\n height: 30,\n },\n }\n ) : logoUrl ? (\n <img width={30} height={30} src={logoUrl} alt={`${name} logo`} />\n ) : (\n <IconGenericToken width={30} height={30} />\n )}\n <Text styles={{ fontWeight: '500', textTransform: 'capitalize' }}>{name}</Text>\n </HStack>\n <VStack gap={0} alignItems=\"flex-end\">\n <Text size=\"sm\" styles={{ lineHeight: '1.5rem', fontWeight: '500' }}>\n {USDBalance}\n </Text>\n <Text size=\"sm\" styles={{ lineHeight: '1.5rem', color: token('colors.text.secondary') }}>\n {tokenBalance} {symbol.toUpperCase()}\n </Text>\n </VStack>\n </HStack>\n );\n};\n\nconst TokenListItemBase = (props: TokenListItemProps) => {\n const { name, symbol, USDBalance, tokenBalance, logoUrl, onPress } = props;\n\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n\n if (onPress)\n return (\n <button\n ref={ref}\n {...mergeProps(buttonProps, focusProps)}\n className={css({\n w: 'full',\n p: 4,\n minH: 20,\n bg: 'neutral.quaternary',\n transition: 'background-color 0.2s',\n _hover: { bg: 'neutral.secondary' },\n rounded: 'lg',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 1,\n cursor: 'pointer',\n })}\n >\n <ListContent\n name={name}\n symbol={symbol}\n USDBalance={USDBalance}\n tokenBalance={tokenBalance}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n />\n </button>\n );\n\n return (\n <ListContent\n name={name}\n symbol={symbol}\n USDBalance={USDBalance}\n tokenBalance={tokenBalance}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n />\n );\n });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","USDBalance","tokenBalance","symbol","tokenIcon","logoUrl","_jsxs","HStack","IconGenericToken","Text","VStack","token","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","mergeProps","css","TokenListItem"],"mappings":"2qBAkBA,MAAMA,EAAYC,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAACC,EAAM,CAAA,SACJC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAMKM,EAAc,CAAC,CAAE,KAAAC,EAAM,WAAAC,EAAY,aAAAC,EAAc,OAAAC,EAAQ,UAAAC,EAAW,QAAAC,CAAO,IAE7EC,EAACC,EAAM,CAAC,EAAE,OAAO,QAAQ,0BACvBD,EAACC,EAAO,CAAA,IAAK,YACVH,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFX,EAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKW,EAAS,IAAK,GAAGL,CAAI,OAAW,CAAA,EAEjEN,EAACc,EAAgB,CAAC,MAAO,GAAI,OAAQ,EAAE,CAAA,EAEzCd,EAACe,EAAK,CAAA,OAAQ,CAAE,WAAY,MAAO,cAAe,YAAY,EAAK,SAAAT,GAAY,CACxE,CAAA,EACTM,EAACI,EAAO,CAAA,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAhB,EAACe,EAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,WAAY,KAAO,EAAA,SAChER,CACI,CAAA,EACPK,EAACG,EAAK,CAAA,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,MAAOE,EAAM,uBAAuB,CAAC,EAClF,SAAA,CAAAT,EAAe,IAAAC,EAAO,YAAA,CAAa,CAAA,CAAA,CAC/B,CACA,CAAA,CAAA,CAAA,CAAA,EAKTS,EAAqBnB,GAA6B,CACtD,KAAM,CAAE,KAAAO,EAAM,OAAAG,EAAQ,WAAAF,EAAY,aAAAC,EAAc,QAAAG,EAAS,QAAAQ,CAAS,EAAGpB,EAE/DqB,EAAMC,EAAO,IAAI,EAEjBC,EAAcC,EAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEN,CAAE,YAAAK,CAAW,EAAKC,EAAU,CAAE,GAAG1B,EAAO,QAASuB,GAAeF,CAAG,EACnE,CAAE,eAAAM,EAAgB,WAAAC,GAAeC,EAEvC,EAAA,OAAOC,EAAW9B,EAAM,SAAU+B,GAAQ,CACxC,MAAMpB,EAAYoB,EAAM,IAAIlC,CAAS,EAErC,OAAIuB,EAEAnB,EACE,SAAA,CAAA,IAAKoB,KACDW,EAAWP,EAAaG,CAAU,EACtC,UAAWK,EAAI,CACb,EAAG,OACH,EAAG,EACH,KAAM,GACN,GAAI,qBACJ,WAAY,wBACZ,OAAQ,CAAE,GAAI,mBAAqB,EACnC,QAAS,KACT,aAAc,aACd,aAAcN,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,EACf,OAAQ,SACT,CAAA,EAED,SAAA1B,EAACK,EAAW,CACV,KAAMC,EACN,OAAQG,EACR,WAAYF,EACZ,aAAcC,EACd,UAAWE,EACX,QAASC,CACT,CAAA,CAAA,CAAA,EAKNX,EAACK,EAAW,CACV,KAAMC,EACN,OAAQG,EACR,WAAYF,EACZ,aAAcC,EACd,UAAWE,EACX,QAASC,CAAO,CAAA,CAGtB,CAAC,CACH,EAEasB,EAAgB,OAAO,OAAOf,EAAmB,CAAE,UAAAtB,CAAS,CAAE"}
1
+ {"version":3,"file":"token-list-item.js","sources":["../../../../src/components/list-items/token-list-item.tsx"],"sourcesContent":["import { IconGenericToken } from '@components/logos';\nimport { Text } from '@components/primitives';\nimport { css } from '@styled/css';\nimport { Center, HStack, VStack } from '@styled/jsx';\nimport { token } from '@styled/tokens';\nimport { createHost, createSlot } from 'create-slots';\nimport { Children, cloneElement, useCallback, useRef } from 'react';\nimport { AriaButtonProps, mergeProps, useButton, useFocusRing } from 'react-aria';\n\nexport interface TokenListItemProps extends AriaButtonProps {\n name: string;\n fiatBalanceWithSymbol: string;\n tokenBalanceWithSymbol: string;\n logoUrl?: string;\n onPress?: () => void;\n}\n\nconst TokenIcon = createSlot(({ children, ...props }) => {\n return (\n <Center>\n {Children.map(children, child => {\n return cloneElement(child, props);\n })}\n </Center>\n );\n});\n\ninterface ListContentProps extends Omit<TokenListItemProps, 'onPress'> {\n tokenIcon?: React.ReactElement;\n}\n\nconst ListContent = ({ name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, tokenIcon, logoUrl }: ListContentProps) => {\n return (\n <HStack w=\"full\" justify=\"space-between\">\n <HStack gap={2}>\n {tokenIcon ? (\n {\n ...tokenIcon,\n props: {\n ...tokenIcon.props,\n width: 30,\n height: 30,\n },\n }\n ) : logoUrl ? (\n <img width={30} height={30} src={logoUrl} alt={`${name} logo`} />\n ) : (\n <IconGenericToken width={30} height={30} />\n )}\n <Text styles={{ fontWeight: '500', textTransform: 'capitalize' }}>{name}</Text>\n </HStack>\n <VStack gap={0} alignItems=\"flex-end\">\n <Text size=\"sm\" styles={{ lineHeight: '1.5rem', fontWeight: '500' }}>\n {fiatBalanceWithSymbol}\n </Text>\n <Text size=\"sm\" styles={{ lineHeight: '1.5rem', color: token('colors.text.secondary') }}>\n {tokenBalanceWithSymbol}\n </Text>\n </VStack>\n </HStack>\n );\n};\n\nconst TokenListItemBase = (props: TokenListItemProps) => {\n const { name, fiatBalanceWithSymbol, tokenBalanceWithSymbol, logoUrl, onPress } = props;\n\n const ref = useRef(null);\n\n const handlePress = useCallback(() => {\n onPress?.();\n }, [onPress]);\n\n const { buttonProps } = useButton({ ...props, onPress: handlePress }, ref);\n const { isFocusVisible, focusProps } = useFocusRing();\n\n return createHost(props.children, slots => {\n const tokenIcon = slots.get(TokenIcon);\n\n if (onPress)\n return (\n <button\n ref={ref}\n {...mergeProps(buttonProps, focusProps)}\n className={css({\n w: 'full',\n p: 4,\n minH: 20,\n bg: 'neutral.quaternary',\n transition: 'background-color 0.2s',\n _hover: { bg: 'neutral.secondary' },\n rounded: 'lg',\n outlineColor: 'brand.base',\n outlineStyle: isFocusVisible ? 'solid' : 'none',\n outlineWidth: 'thick',\n outlineOffset: 1,\n cursor: 'pointer',\n })}\n >\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n />\n </button>\n );\n\n return (\n <ListContent\n name={name}\n fiatBalanceWithSymbol={fiatBalanceWithSymbol}\n tokenBalanceWithSymbol={tokenBalanceWithSymbol}\n tokenIcon={tokenIcon}\n logoUrl={logoUrl}\n />\n );\n });\n};\n\nexport const TokenListItem = Object.assign(TokenListItemBase, { TokenIcon });\n"],"names":["TokenIcon","createSlot","children","props","_jsx","Center","Children","child","cloneElement","ListContent","name","fiatBalanceWithSymbol","tokenBalanceWithSymbol","tokenIcon","logoUrl","_jsxs","HStack","IconGenericToken","Text","VStack","token","TokenListItemBase","onPress","ref","useRef","handlePress","useCallback","buttonProps","useButton","isFocusVisible","focusProps","useFocusRing","createHost","slots","mergeProps","css","TokenListItem"],"mappings":"2qBAiBA,MAAMA,EAAYC,EAAW,CAAC,CAAE,SAAAC,EAAU,GAAGC,CAAO,IAEhDC,EAACC,EAAM,CAAA,SACJC,EAAS,IAAIJ,EAAUK,GACfC,EAAaD,EAAOJ,CAAK,CACjC,CACM,CAAA,CAEZ,EAMKM,EAAc,CAAC,CAAE,KAAAC,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,UAAAC,EAAW,QAAAC,CAAO,IAE1FC,EAACC,EAAM,CAAC,EAAE,OAAO,QAAQ,0BACvBD,EAACC,EAAO,CAAA,IAAK,YACVH,EACC,CACE,GAAGA,EACH,MAAO,CACL,GAAGA,EAAU,MACb,MAAO,GACP,OAAQ,EACT,CACF,EACCC,EACFV,EAAK,MAAA,CAAA,MAAO,GAAI,OAAQ,GAAI,IAAKU,EAAS,IAAK,GAAGJ,CAAI,OAAW,CAAA,EAEjEN,EAACa,EAAiB,CAAA,MAAO,GAAI,OAAQ,EAAM,CAAA,EAE7Cb,EAACc,EAAI,CAAC,OAAQ,CAAE,WAAY,MAAO,cAAe,YAAc,EAAA,SAAGR,CAAI,CAAA,CAAQ,CACxE,CAAA,EACTK,EAACI,EAAO,CAAA,IAAK,EAAG,WAAW,WACzB,SAAA,CAAAf,EAACc,EAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,WAAY,KAAO,EAAA,SAChEP,CAAqB,CAAA,EAExBP,EAACc,EAAI,CAAC,KAAK,KAAK,OAAQ,CAAE,WAAY,SAAU,MAAOE,EAAM,uBAAuB,CAAC,EAClF,SAAAR,CACI,CAAA,CAAA,CAAA,CAAA,CACA,CACF,CAAA,EAIPS,EAAqBlB,GAA6B,CACtD,KAAM,CAAE,KAAAO,EAAM,sBAAAC,EAAuB,uBAAAC,EAAwB,QAAAE,EAAS,QAAAQ,CAAS,EAAGnB,EAE5EoB,EAAMC,EAAO,IAAI,EAEjBC,EAAcC,EAAY,IAAK,CACnCJ,IACF,CAAA,EAAG,CAACA,CAAO,CAAC,EAEN,CAAE,YAAAK,CAAW,EAAKC,EAAU,CAAE,GAAGzB,EAAO,QAASsB,GAAeF,CAAG,EACnE,CAAE,eAAAM,EAAgB,WAAAC,GAAeC,EAEvC,EAAA,OAAOC,EAAW7B,EAAM,SAAU8B,GAAQ,CACxC,MAAMpB,EAAYoB,EAAM,IAAIjC,CAAS,EAErC,OAAIsB,EAEAlB,EACE,SAAA,CAAA,IAAKmB,KACDW,EAAWP,EAAaG,CAAU,EACtC,UAAWK,EAAI,CACb,EAAG,OACH,EAAG,EACH,KAAM,GACN,GAAI,qBACJ,WAAY,wBACZ,OAAQ,CAAE,GAAI,mBAAqB,EACnC,QAAS,KACT,aAAc,aACd,aAAcN,EAAiB,QAAU,OACzC,aAAc,QACd,cAAe,EACf,OAAQ,UACT,EAAC,SAEFzB,EAACK,EACC,CAAA,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,CAAO,CAAA,CAEX,CAAA,EAIXV,EAACK,EACC,CAAA,KAAMC,EACN,sBAAuBC,EACvB,uBAAwBC,EACxB,UAAWC,EACX,QAASC,CACT,CAAA,CAEN,CAAC,CACH,EAEasB,EAAgB,OAAO,OAAOf,EAAmB,CAAE,UAAArB,CAAS,CAAE"}
@@ -2,9 +2,8 @@
2
2
  import { AriaButtonProps } from 'react-aria';
3
3
  export interface TokenListItemProps extends AriaButtonProps {
4
4
  name: string;
5
- symbol: string;
6
- USDBalance: string;
7
- tokenBalance: number;
5
+ fiatBalanceWithSymbol: string;
6
+ tokenBalanceWithSymbol: string;
8
7
  logoUrl?: string;
9
8
  onPress?: () => void;
10
9
  }
@@ -1 +1 @@
1
- {"version":3,"file":"token-list-item.d.ts","sourceRoot":"","sources":["../../../../src/components/list-items/token-list-item.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,eAAe,EAAuC,MAAM,YAAY,CAAC;AAElF,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA2GD,eAAO,MAAM,aAAa,WA3DQ,kBAAkB;;CA2DwB,CAAC"}
1
+ {"version":3,"file":"token-list-item.d.ts","sourceRoot":"","sources":["../../../../src/components/list-items/token-list-item.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,eAAe,EAAuC,MAAM,YAAY,CAAC;AAElF,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,IAAI,EAAE,MAAM,CAAC;IACb,qBAAqB,EAAE,MAAM,CAAC;IAC9B,sBAAsB,EAAE,MAAM,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAyGD,eAAO,MAAM,aAAa,WAzDQ,kBAAkB;;CAyDwB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magiclabs/ui-components",
3
- "version": "1.15.0",
3
+ "version": "1.15.2",
4
4
  "description": "💅 A theme-able library of reusable UI components",
5
5
  "author": "Magic Labs <open-source@magic.link>",
6
6
  "repository": {